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>
原文地址：https://www.cnblogs.com/Rainscoco/p/9082330.html
时间： 2024-10-08 12:27:11