异步代码的处理方案

需求：异步处理  直接看例子

url
url=url+str1
url=url+str2 
1：第一种方案多次回调 回调地狱
 1 function requestData(url) {
 2     //异步请求代码会被放在excutor中
 3     return new Promise((resolve, reject) => {
 4         setTimeout(() => {
 5             resolve(url)
 6         }, 1000)
 7 
 8     })
 9 }
10 //1：第一种方案多次回调 回调地狱
11 requestData("tyy").then(res => {
12         requestData(res + " is").then(res => {
13             requestData(res + " happy").then(res => {
14                 console.log(res);
15             })
16         })
17     })
2:第二种方案 ：Promise中then的返回值来解决 链式调用
 1 function requestData(url) {
 2     //异步请求代码会被放在excutor中
 3     return new Promise((resolve, reject) => {
 4         setTimeout(() => {
 5             resolve(url)
 6         }, 1000)
 7 
 8     })
 9 }
10 requestData("tsf").then(res => {
11         return requestData(res + " also")
12     }).then(res => {
13         return requestData(res + " is")
14     }).then(res => {
15         return requestData(res + " happy")
16     }).then(res => {
17         console.log(res);
18     })
3:Promise+gnerator实现--yiled后面的值会作为value
 1 function requestData(url) {
 2     //异步请求代码会被放在excutor中
 3     return new Promise((resolve, reject) => {
 4         setTimeout(() => {
 5             resolve(url)
 6         }, 1000)
 7 
 8     })
 9 }
10 function* getData() {
11         const res1 = yield requestData("zjj")
12         const res2 = yield requestData(res1 + " is")
13         const res3 = yield requestData(res2 + " happy")
14         const res4 = yield requestData(res3 + " too")
15         console.log(res4);
16     }
17     // //手动执行生成器函数
18     // const generator = getData()
19     // generator.next().value.then(res => {
20     //         generator.next(res).value.then(res => {
21     //             generator.next(res).value.then(res => {
22     //                 generator.next(res)
23     //             })
24     //         })
25     //     })
26     //自动化
27 function exeGnerator(genFn) {
28     const generator = genFn()
29     function exec(res) {
30         const result = generator.next(res)
31         if (result.done) return result.value
32         result.value.then(res => {
33             exec(res)
34         })
35 
36     }
37     exec()
38 }
4：第三方包co自动执行
 1 requestData("tyy").then(res => {
 2         requestData(res + " is").then(res => {
 3             requestData(res + " happy").then(res => {
 4                 console.log(res);
 5             })
 6         })
 7     })
 8 function* getData() {
 9         const res1 = yield requestData("zjj")
10         const res2 = yield requestData(res1 + " is")
11         const res3 = yield requestData(res2 + " happy")
12         const res4 = yield requestData(res3 + " too")
13         console.log(res4);
14     }
15 const co = require('co')
16 co(getData)
5:async/await
 1 function requestData(url) {
 2     //异步请求代码会被放在excutor中
 3     return new Promise((resolve, reject) => {
 4         setTimeout(() => {
 5             resolve(url)
 6         }, 1000)
 7 
 8     })
 9 }
10 async function getData() {
11     const res1 = await requestData("zjj")
12     const res2 = await requestData(res1 + " is")
13     const res3 = await requestData(res2 + " happy")
14     const res4 = await requestData(res3 + " too")
15     console.log(res4);
16 }
17 getData()

 

posted @ 2022-04-05 17:12  沁霓  阅读(76)  评论(0)    收藏  举报