Skip to content

Commit a571360

Browse files
AmazingAngAmazingAng
authored
Merge pull request WTFAcademy#8 from holazz/08_Asynchronous
Add 08_Asynchronous
2 parents 0909078 + 8769ae5 commit a571360

2 files changed

Lines changed: 783 additions & 0 deletions

File tree

‎08_Asynchronous/index.js‎

Lines changed: 336 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,336 @@
1+
/** callback */
2+
{
3+
function callback() {
4+
console.log('Hello, WTF JavaScript!')
5+
}
6+
7+
setTimeout(callback, 1000)
8+
9+
// Hello, WTF JavaScript! (1 秒后输出)
10+
11+
setTimeout(() => {
12+
console.log('Hello, WTF JavaScript!')
13+
setTimeout(() => {
14+
console.log('Hello, WTF HTML!')
15+
setTimeout(() => {
16+
console.log('Hello, WTF CSS!')
17+
}, 1000)
18+
}, 1000)
19+
}, 1000)
20+
21+
// Hello, WTF JavaScript! (1 秒后输出)
22+
// Hello, WTF HTML! (2 秒后输出)
23+
// Hello, WTF CSS! (3 秒后输出)
24+
}
25+
26+
/** Promise 基本用法 */
27+
{
28+
const p = new Promise((resolve, reject) => {
29+
setTimeout(() => {
30+
resolve('Hello, WTF JavaScript!')
31+
}, 1000)
32+
})
33+
34+
p.then((value) => {
35+
console.log(value)
36+
})
37+
38+
// Hello, WTF JavaScript! (1 秒后输出)
39+
}
40+
41+
/** Promise 同步创建 */
42+
{
43+
const p = new Promise((resolve, reject) => {
44+
console.log('Promise 创建了')
45+
setTimeout(() => {
46+
resolve('Hello, WTF JavaScript!')
47+
}, 1000)
48+
})
49+
50+
p.then((value) => {
51+
console.log(value)
52+
})
53+
54+
// Promise 创建了
55+
// Hello, WTF JavaScript! (1 秒后输出)
56+
}
57+
58+
/** Promise reject */
59+
{
60+
const p = new Promise((resolve, reject) => {
61+
reject('发生错误！')
62+
})
63+
64+
p.then(
65+
(value) => {
66+
console.log(value)
67+
},
68+
(error) => {
69+
console.log(error)
70+
}
71+
)
72+
73+
// 发生错误！
74+
}
75+
76+
/** Promise resolve 后执行 reject */
77+
{
78+
const p = new Promise((resolve, reject) => {
79+
resolve('Hello, WTF JavaScript!')
80+
throw new Error('发生错误！')
81+
})
82+
83+
p.then(
84+
(value) => {
85+
console.log(value)
86+
},
87+
(error) => {
88+
console.log(error)
89+
}
90+
)
91+
92+
// Hello, WTF JavaScript!
93+
}
94+
95+
/** Promise.catch */
96+
{
97+
const p = new Promise((resolve, reject) => {
98+
reject('发生错误！')
99+
})
100+
101+
p.then((value) => {
102+
console.log(value)
103+
}).catch((error) => {
104+
console.log(error)
105+
})
106+
107+
// 发生错误！
108+
}
109+
110+
/** Promise.finally */
111+
{
112+
const p = new Promise((resolve, reject) => {
113+
resolve('Hello, WTF JavaScript!')
114+
})
115+
116+
p.then((value) => {
117+
console.log(value)
118+
}).finally(() => {
119+
console.log('finally')
120+
})
121+
122+
// Hello, WTF JavaScript!
123+
// finally
124+
}
125+
126+
/** Promise 链式调用 */
127+
{
128+
const baseURL = 'https://api.wtf.academy/courses/e1faa656-8c53-45f4-bb4f-950db92bee60'
129+
130+
fetch(`${baseURL}/lessons`)
131+
.then((res) => {
132+
return res.json()
133+
})
134+
.then((res) => {
135+
const id = res.data.list[0].lesson_id
136+
return fetch(`${baseURL}/user_lessons/${id}`)
137+
})
138+
.then((res) => {
139+
return res.json()
140+
})
141+
.then((res) => {
142+
const title = res.data.lesson.lesson_title
143+
console.log(title) // HelloWeb3 (三行代码)
144+
})
145+
}
146+
147+
/** Promise.all */
148+
{
149+
const p1 = new Promise((resolve, reject) => {
150+
setTimeout(() => {
151+
resolve('Hello, WTF JavaScript!')
152+
}, 1000)
153+
})
154+
155+
const p2 = new Promise((resolve, reject) => {
156+
setTimeout(() => {
157+
resolve('Hello, WTF HTML!')
158+
}, 3000)
159+
})
160+
161+
const p3 = new Promise((resolve, reject) => {
162+
setTimeout(() => {
163+
resolve('Hello, WTF CSS!')
164+
}, 2000)
165+
})
166+
167+
Promise.all([p1, p2, p3]).then((res) => {
168+
console.log(res)
169+
})
170+
171+
// ['Hello, WTF JavaScript!', 'Hello, WTF HTML!', 'Hello, WTF CSS!'] (3 秒后输出)
172+
}
173+
174+
/** Promise.allSettled */
175+
{
176+
const p1 = new Promise((resolve, reject) => {
177+
setTimeout(() => {
178+
resolve('Hello, WTF JavaScript!')
179+
}, 1000)
180+
})
181+
182+
const p2 = new Promise((resolve, reject) => {
183+
setTimeout(() => {
184+
resolve('Hello, WTF HTML!')
185+
}, 3000)
186+
})
187+
188+
const p3 = new Promise((resolve, reject) => {
189+
setTimeout(() => {
190+
reject('Hello, WTF CSS!')
191+
}, 2000)
192+
})
193+
194+
Promise.allSettled([p1, p2, p3]).then((res) => {
195+
console.log(res)
196+
})
197+
198+
// [
199+
// { status: 'fulfilled', value: 'Hello, WTF JavaScript!' },
200+
// { status: 'fulfilled', value: 'Hello, WTF HTML!' },
201+
// { status: '`rejected`', reason: 'Hello, WTF CSS!' })
202+
// ] (3 秒后输出)
203+
}
204+
205+
/** Promise.race */
206+
{
207+
const p1 = new Promise((resolve, reject) => {
208+
setTimeout(() => {
209+
resolve('Hello, WTF JavaScript!')
210+
}, 1000)
211+
})
212+
213+
const p2 = new Promise((resolve, reject) => {
214+
setTimeout(() => {
215+
resolve('Hello, WTF HTML!')
216+
}, 3000)
217+
})
218+
219+
const p3 = new Promise((resolve, reject) => {
220+
setTimeout(() => {
221+
resolve('Hello, WTF CSS!')
222+
}, 2000)
223+
})
224+
225+
Promise.race([p1, p2, p3]).then((res) => {
226+
console.log(res)
227+
})
228+
229+
// Hello, WTF JavaScript! (1 秒后输出)
230+
}
231+
232+
/** Promise.any */
233+
{
234+
const p1 = new Promise((resolve, reject) => {
235+
setTimeout(() => {
236+
resolve('Hello, WTF JavaScript!')
237+
}, 1000)
238+
})
239+
240+
const p2 = new Promise((resolve, reject) => {
241+
setTimeout(() => {
242+
resolve('Hello, WTF HTML!')
243+
}, 3000)
244+
})
245+
246+
const p3 = new Promise((resolve, reject) => {
247+
setTimeout(() => {
248+
reject('Hello, WTF CSS!')
249+
}, 2000)
250+
})
251+
252+
Promise.any([p1, p2, p3]).then((res) => {
253+
console.log(res)
254+
})
255+
256+
// Hello, WTF JavaScript! (1 秒后输出)
257+
258+
const p4 = new Promise((resolve, reject) => {
259+
setTimeout(() => {
260+
reject('Hello, WTF JavaScript!')
261+
}, 1000)
262+
})
263+
264+
const p5 = new Promise((resolve, reject) => {
265+
setTimeout(() => {
266+
reject('Hello, WTF HTML!')
267+
}, 3000)
268+
})
269+
270+
const p6 = new Promise((resolve, reject) => {
271+
setTimeout(() => {
272+
reject('Hello, WTF CSS!')
273+
}, 2000)
274+
})
275+
276+
Promise.any([p4, p5, p6]).then((res) => {
277+
console.log(res)
278+
})
279+
280+
// AggregateError: All promises were rejected
281+
}
282+
283+
/** Promise.resolve */
284+
{
285+
Promise.resolve('Hello, WTF JavaScript!')
286+
}
287+
288+
/** Promise.reject */
289+
{
290+
Promise.reject(new Error('发生错误！'))
291+
}
292+
293+
/** async 函数 */
294+
{
295+
async function hello() {
296+
return 'Hello, WTF JavaScript!'
297+
}
298+
299+
console.log(hello()) // Promise {<fulfilled>: 'Hello, WTF JavaScript!'}
300+
}
301+
302+
/** await */
303+
{
304+
async function hello() {
305+
const value = await new Promise((resolve, reject) => {
306+
setTimeout(() => {
307+
resolve('Hello, WTF JavaScript!')
308+
}, 1000)
309+
})
310+
console.log(value)
311+
}
312+
313+
hello()
314+
315+
// Hello, WTF JavaScript! (1 秒后输出)
316+
}
317+
318+
/** async 错误处理 */
319+
{
320+
async function hello() {
321+
try {
322+
const value = await new Promise((resolve, reject) => {
323+
setTimeout(() => {
324+
reject('Hello, WTF JavaScript!')
325+
}, 1000)
326+
})
327+
console.log(value)
328+
} catch (err) {
329+
console.log(`错误：${err}`)
330+
}
331+
}
332+
333+
hello()
334+
335+
// 错误：Hello, WTF JavaScript! (1 秒后输出)
336+
}

0 commit comments

Comments
 (0)