ES6 async await

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>async-await</title>
 </head>
 <body>
     <h3>ES6 async 函数用法</h3>

     <script>

         window.onload = function() {

             // 例-1: 继发异步
             async function f() {
                 try {
                     let a = await new Promise((resolve, reject) => {setTimeout(resolve.bind(null, 'hello'), 1000)});
                     console.log('a: ', a);
                     let b = await new Promise((resolve, reject) => {setTimeout(resolve.bind(null, 'world'), 2000)});
                     console.log('b: ', b);
                     let c = await new Promise((resolve, reject) => {setTimeout(resolve.bind(null, 'xyz'), 3000)});
                     console.log('c: ', c);
                     return c;
                 } catch(error) {
                     console.log('error: ', error);
                 }
             }
             // 继发调用: 回调嵌套, 抛出最后结果, f() 只用来作为一个流程管理器
             // f().then(v => {console.log('final-result: '+ v);}).catch(e => {console.log('final-error-reason: ', e);});

             // 例-2: 并发异步
             async function g() {
                 try {
                     return await Promise.all([
                         ajax1('https://api.github.com/users/github', 'get'),
                         ajax2('https://api.github.com/users', 'get'),
                         ajax3('https://api.github.com', 'get'),
                         ajax4('https://api.github.com/users/chosen', 'get')
                     ]);
                 } catch(error) {
                     console.log('error: ', error);
                 }
             }

             /*
             * https://api.github.com/users/github
             * https://api.github.com/users
             * https://api.github.com
             * https://api.github.com/users/chosen
             */

             // 并发调用: 全部执行完才抛出最后结果, g() 只用来作为一个流程管理器
             g().then(obj => {
                 let[github, users, api, chosen] = obj; // 解构
                 let [jGithub, jUsers, jApi, jChosen] = [JSON.parse(github), JSON.parse(users), JSON.parse(api), JSON.parse(chosen)]; // 解构转成 js 对象
                 // 业务流程
                 console.log('---------- all-completed ----------');
                 console.log('github >>>>>>', jGithub['login']);
                 console.log('users >>>>>>', jUsers[0]['login']);
                 console.log('api >>>>>>', jApi['current_user_url']);
                 console.log('chosen >>>>>>', jChosen['login']);
             }).catch(e => {
                 console.log(e);
             })

         }

         // --------------- function --------------------

         // ajax1
         function ajax1(url, type) {
             return new Promise((resolve, reject) => {
                 console.log('ajax1 start~');
                 myAjax(url, type, null, function(data) {
                     console.log('ajax1-completed!');
                     resolve(data);
                 }, function(reason) {
                     console.log('ajax1-failed!');
                     reject(reason);
                 })
             })
         }

         // ajax2
         function ajax2(url, type) {
             return new Promise((resolve, reject) => {
                 console.log('ajax2 start~');
                 myAjax(url, type, null, function(data) {
                     console.log('ajax2-completed!');
                     resolve(data);
                 }, function(reason) {
                     console.log('ajax2-failed!');
                     reject(reason);
                 })
             })
         }

         // ajax3
         function ajax3(url, type) {
             return new Promise((resolve, reject) => {
                 console.log('ajax3 start~');
                 myAjax(url, type, null, function(data) {
                     console.log('ajax3-completed!');
                     resolve(data);
                 }, function(reason) {
                     console.log('ajax3-failed!');
                     reject(reason);
                 })
             })
         }

         // ajax4
         function ajax4(url, type) {
             return new Promise((resolve, reject) => {
                 console.log('ajax4 start~');
                 console.log('---------- cut-off-line ----------');
                 myAjax(url, type, null, function(data) {
                     console.log('ajax4-completed!');
                     resolve(data);
                 }, function(reason) {
                     console.log('ajax4-failed!');
                     reject(reason);
                 })
             })
         }
         // 以上 4 个函数(ajax1 ~ ajax4)可以进一步封装, 但为了表达清晰, 此处不做处理

         // 自定义 ajax, 类型仅限于 get 和 post, 回调函数: success/error
         function myAjax(url, type, params, success, error) {
             var xhr = null;
             var args = null;
             xhr = new XMLHttpRequest();
             xhr.onreadystatechange = function() {
                 if (xhr.readyState == 4) {
                     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                         success(xhr.responseText);
                     } else {
                         error("Request was unsuccessful: "+ xhr.status);
                     }
                 }
             };
             xhr.open(type, url, true); // 类型, 连接, 是否异步
             if (type.toLowerCase() == 'post') {
                 // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 默认的表单提交
                 xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8"); // JSON.stringify 处理后的json 键值对
                 args = params;
             }
             xhr.send(args);
         }
     </script>
 </body>
 </html>