ES6 async await 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>async-await</title>
  6 </head>
  7 <body>
  8     <h3>ES6 async 函数用法</h3>
  9 
 10     <script>
 11 
 12         window.onload = function() {
 13 
 14             // 例-1: 继发异步
 15             async function f() {
 16                 try {
 17                     let a = await new Promise((resolve, reject) => {setTimeout(resolve.bind(null, 'hello'), 1000)});
 18                     console.log('a: ', a);
 19                     let b = await new Promise((resolve, reject) => {setTimeout(resolve.bind(null, 'world'), 2000)});
 20                     console.log('b: ', b);
 21                     let c = await new Promise((resolve, reject) => {setTimeout(resolve.bind(null, 'xyz'), 3000)});
 22                     console.log('c: ', c);
 23                     return c;
 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             async function g() {
 34                 try {
 35                     return await 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/github
 48             * https://api.github.com/users
 49             * https://api.github.com
 50             * https://api.github.com/users/chosen
 51             */
 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         function ajax1(url, type) {
 78             return new Promise((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         function ajax2(url, type) {
 92             return new Promise((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         function ajax3(url, type) {
106             return new Promise((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         function ajax4(url, type) {
120             return new Promise((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         function myAjax(url, type, params, success, error) {
137             var xhr = null;
138             var args = null;
139             xhr = new XMLHttpRequest();
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     </script>
158 </body>
159 </html>

 

posted on 2018-05-31 16:09  炭火烧洋芋  阅读(195)  评论(0)    收藏  举报

导航