ES6 async await
阿新 • • 發佈：2018-05-24
set params ack htm lin sync ready open color
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 = awaitnew 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 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 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>
ES6 async await