♠ 异步处理方案
作者:互联网
♣ 异步处理方案
需求:
- 我们需要向服务器发送网络请求获取数据,一共需要发送三次请求;
- 第二次的请求url依赖于第一次的结果;
- 第三次的请求url依赖于第二次的结果;
依次类推;
点击查看代码
function requestData(url) {
// 异步请求的代码会被放入到executor中
return new Promise((resolve, reject) => {
// 模拟网络请求
setTimeout(() => {
// 拿到请求的结果
resolve(url)
}, 2000);
})
}
// 需求:
// 1> url: url -> res: url
// 2> url: res + "aaa" -> res: urlaaa
// 3> url: res + "bbb" => res: urlaaabbb
// 1.第一种方案: 多次回调
// 回调地狱
// requestData("url").then(res => {
// requestData(res + "aaa").then(res => {
// requestData(res + "bbb").then(res => {
// console.log(res)
// })
// })
// })
// 2.第二种方案: Promise中then的返回值来解决
//requestData("url").then(res => {
// return requestData(res + "aaa")
// }).then(res => {
// return requestData(res + "bbb")
// }).then(res => {
// console.log(res)
// })
点击查看代码
function requestData(url) {
// 异步请求的代码会被放入到executor中
return new Promise((resolve, reject) => {
// 模拟网络请求
setTimeout(() => {
// 拿到请求的结果
resolve(url)
}, 2000);
})
}
//但是上面的代码其实看起来也是阅读性比较差的,有没有办法可以继续来对上面的代码进行优化呢?
// 3.第三种方案: Promise + generator实现
function* getData() {
const res1 = yield requestData("url")
const res2 = yield requestData(res1 + "aaa")
const res3 = yield requestData(res2 + "bbb")
const res4 = yield requestData(res3 + "ccc")
console.log(res4)
}
// 1> 手动执行生成器函数
const generator = getData()
generator.next().value.then(res => {
generator.next(res).value.then(res => {
generator.next(res).value.then(res => {
generator.next(res)
})
})
})
点击查看代码
function requestData(url) {
// 异步请求的代码会被放入到executor中
return new Promise((resolve, reject) => {
// 模拟网络请求
setTimeout(() => {
// 拿到请求的结果
resolve(url)
}, 1000);
})
}
function* getData() {
const res1 = yield requestData("url")
const res2 = yield requestData(res1 + "aaa")
const res3 = yield requestData(res2 + "bbb")
const res4 = yield requestData(res3 + "ccc")
console.log(res4)
}
// 2> 自己封装了一个自动执行的函数
function execGenerator(genFn) {
//拿到生成器
const generator = genFn()
function exec(res) {
const result = generator.next(res)
if (result.done) {
return result.value
}
result.value.then(res => {
exec(res)
})
}
exec()
}
execGenerator(getData)
标签:异步,const,generator,方案,处理,res,yield,requestData,url 来源: https://www.cnblogs.com/sunflower-js/p/15501410.html