js中promise解决callback回调地狱以及使用async+await异步处理的方法

时间:2021-04-21 11:08:21

1、callback回调地狱

function ajax(fn) {
setTimeout(()=> {
console.log('你好')
fn()
}, 1000)
}
ajax(() => {
console.log('执行结束')
ajax(()=>{
console.log('执行结束')
ajax(()=>{
console.log('执行结束')
ajax(()=>{
console.log('执行结束')
})
})
})
})

2、promise解决回调地狱

function delay(word) {
return new Promise((resolve, reject) => {
setTimeout(()=>{
resolve(word)
}, 2000)
})
} delay('孙悟空')
.then((word)=>{
console.log(word)
return delay('猪八戒')
})
.then((word)=>{
console.log(word)
return delay('沙悟净')
})
.then((word) => {
console.log(word)
})
.catch
console.log('执行结束')

3、async+await优雅处理异步

function delay(word) {
return new Promise((resolve, reject) => {
setTimeout(()=>{
resolve(word)
}, 2000)
})
} async function start() {
const word1 = await delay('孙悟空')
console.log(word1)
const word2 = await delay('猪八戒')
console.log(word2)
const word3 = await delay('沙悟净')
console.log(word3)
}
start()