es6 ajax async,ES6 async await(示例代码)

1

2

3

4

5

async-await

6

7

8

ES6 async 函数用法

9

10

11

12 window.οnlοad= function() {13

14 //例-1: 继发异步

15 asyncfunctionf() {16 try{17 let a=awaitnewPromise((resolve, reject)=>{setTimeout(resolve.bind(null,‘hello‘),1000)});18 console.log(‘a:‘, a);19 let b=awaitnewPromise((resolve, reject)=>{setTimeout(resolve.bind(null,‘world‘),2000)});20 console.log(‘b:‘, b);21 let c=awaitnewPromise((resolve, reject)=>{setTimeout(resolve.bind(null,‘xyz‘),3000)});22 console.log(‘c:‘, c);23 returnc;24 }catch(error) {25 console.log(‘error:‘, error);26 }27 }28 //继发调用: 回调嵌套, 抛出最后结果, f() 只用来作为一个流程管理器

29 //f().then(v => {console.log(‘final-result: ‘+ v);}).catch(e => {console.log(‘final-error-reason: ‘, e);});

30

31

32 //例-2: 并发异步

33 asyncfunctiong() {34 try{35 returnawait Promise.all([36 ajax1(‘https://api.github.com/users/github‘,‘get‘),37 ajax2(‘https://api.github.com/users‘,‘get‘),38 ajax3(‘https://api.github.com‘,‘get‘),39 ajax4(‘https://api.github.com/users/chosen‘,‘get‘)40 ]);41 }catch(error) {42 console.log(‘error:‘, error);43 }44 }45

46 /*

47 * https://api.github.com/users/github48 * https://api.github.com/users49 * https://api.github.com50 * https://api.github.com/users/chosen51 */

52

53 //并发调用: 全部执行完才抛出最后结果, g() 只用来作为一个流程管理器

54 g().then(obj=>{55 let[github, users, api, chosen]=obj;//解构

56 let [jGithub, jUsers, jApi, jChosen]=[JSON.parse(github), JSON.parse(users), JSON.parse(api), JSON.parse(chosen)];//解构转成 js 对象

57 //业务流程

58 console.log(‘---------- all-completed ----------‘);59 console.log(‘github >>>>>>‘, jGithub[‘login‘]);60 console.log(‘users >>>>>>‘, jUsers[0][‘login‘]);61 console.log(‘api >>>>>>‘, jApi[‘current_user_url‘]);62 console.log(‘chosen >>>>>>‘, jChosen[‘login‘]);63 }).catch(e=>{64 console.log(e);65 })66

67

68

69

70

71 }72

73 //--------------- function --------------------

74

75

76 //ajax1

77 functionajax1(url, type) {78 return newPromise((resolve, reject)=>{79 console.log(‘ajax1 start~‘);80 myAjax(url, type,null,function(data) {81 console.log(‘ajax1-completed!‘);82 resolve(data);83 },function(reason) {84 console.log(‘ajax1-failed!‘);85 reject(reason);86 })87 })88 }89

90 //ajax2

91 functionajax2(url, type) {92 return newPromise((resolve, reject)=>{93 console.log(‘ajax2 start~‘);94 myAjax(url, type,null,function(data) {95 console.log(‘ajax2-completed!‘);96 resolve(data);97 },function(reason) {98 console.log(‘ajax2-failed!‘);99 reject(reason);100 })101 })102 }103

104 //ajax3

105 functionajax3(url, type) {106 return newPromise((resolve, reject)=>{107 console.log(‘ajax3 start~‘);108 myAjax(url, type,null,function(data) {109 console.log(‘ajax3-completed!‘);110 resolve(data);111 },function(reason) {112 console.log(‘ajax3-failed!‘);113 reject(reason);114 })115 })116 }117

118 //ajax4

119 functionajax4(url, type) {120 return newPromise((resolve, reject)=>{121 console.log(‘ajax4 start~‘);122 console.log(‘---------- cut-off-line ----------‘);123 myAjax(url, type,null,function(data) {124 console.log(‘ajax4-completed!‘);125 resolve(data);126 },function(reason) {127 console.log(‘ajax4-failed!‘);128 reject(reason);129 })130 })131 }132 //以上 4 个函数(ajax1 ~ ajax4)可以进一步封装, 但为了表达清晰, 此处不做处理

133

134

135 //自定义 ajax, 类型仅限于 get 和 post, 回调函数: success/error

136 functionmyAjax(url, type, params, success, error) {137 varxhr= null;138 varargs= null;139 xhr= newXMLHttpRequest();140 xhr.onreadystatechange= function() {141 if(xhr.readyState== 4) {142 if((xhr.status>= 200 &&xhr.status< 300)||xhr.status== 304) {143 success(xhr.responseText);144 }else{145 error("Request was unsuccessful:"+xhr.status);146 }147 }148 };149 xhr.open(type, url,true);//类型, 连接, 是否异步

150 if(type.toLowerCase()== ‘post‘) {151 //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 默认的表单提交

152 xhr.setRequestHeader("Content-Type","application/json; charset=UTF-8");//JSON.stringify 处理后的json 键值对

153 args=params;154 }155 xhr.send(args);156 }157

158

159