最近在看koa的代码基本上前几句就会写道async于是想写下关于链式操作的发展
- 第一次普通Js回调时代,所有的异步操作都会写道cb
function delay(fn) {
setTimeout(() => {
fn()
console.log('你好')
}, 0)
}
delay(() => {
console.log('kaishi')
})
复制代码
这个回调写在加载的delay函数内,如果是多重回调,那么恭喜,你会在delay函数中写上delay(()=>{}, ()=> {}, ()=>{})
- 第二次时代promise,链式操作
<!--代码-->
function delay(name) {
return new Promise((resolve, reject) => {
setTimeout(()=> {
resolve(name)
}, 2000)
})
}
delay('laoxie').then((res) => {
console.log(res)
})
<!--进入链式操作了-->
delay('laoxie').then((res) => {
console.log(res)
return delay('laoqin')
}).then((res) => {
console.log(res)
return delay('laomeng')
}).then((res) => {
console.log(res)
})
复制代码
看上去简洁不少,但是链式操作咋一看比回调看上去舒服多了,但是如果太长看上去还是很别扭,尤其是是链式操作过长或者存在catch操作时
- 第三次时代 ES7, async/await的出现基本上让看异步代码有看同步的感觉,唯一尴尬await必须后面接promise对象
function delay(name) {
return new Promise((resolve, reject) => {
setTimeout(()=> {
resolve(name)
}, 2000)
})
}
async function getdata() {
var val1 = await delay('haifu');
console.log(val1)
var val4 = 1
console.log(val4)
var val2 = await delay('hao');
console.log(val2)
var val3 = await delay('fangl');
console.log(val3)
}
getdata()
复制代码
async包裹的函数,函数作用域内部的内容简直就是同步代码,顺著手往下写的感觉。