JavaScript异步系列的篇章到今天为止已经完结了,从回调函数 => Promise => Generator => async,现在呢我们再用同一个例子，分别用这几种异步方法来实现，自己比较下异步技术哪家强
准备工作
我们先准备好四个接口,
四个接口的返回的数据分别为 ：
刘家军起床了!我们要实现的顺序就是 起床 => 上班 => 下班 => 睡觉
刘家军上班了!
刘家军下班了!
刘家军睡觉了!
回调函数
function ajax(url, sucessC) {
axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/' + url).then(sucessC)
}
// 回调函数
function getUp(callback) {
ajax('asynctest1', res => {
console.log(res.data.data)
callback && typeof callback == 'function' && callback()
})
}
function goToWork(callback) {
ajax('asynctest2', res => {
console.log(res.data.data)
callback && typeof callback == 'function' && callback()
})
}
function offWork(callback) {
ajax('asynctest3', res => {
console.log(res.data.data)
callback && typeof callback == 'function' && callback()
})
}
function sleep() {
ajax('asynctest4', res => {
console.log(res.data.data)
})
}
getUp(() => {
goToWork(() => {
offWork(() => {
sleep()
})
})
})
我们可以看出 当层级再多时 ，就形成了所谓的回调地狱，而且代码不易维护
下面我们用Promise再写一遍
Peomise
function ajax(url, sucessC) {
axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/' + url).then(sucessC)
}
// promise
function getUp() {
return new Promise(resolve => {
ajax('asynctest1', res => {
resolve(res.data.data)
})
})
}
function goToWork() {
return new Promise(resolve => {
ajax('asynctest2', res => {
resolve(res.data.data)
})
})
}
function offWork() {
return new Promise(resolve => {
ajax('asynctest3', res => {
resolve(res.data.data)
})
})
}
function sleep() {
return new Promise(resolve => {
ajax('asynctest4', res => {
resolve(res.data.data)
})
})
}
getUp().then(res => {
console.log(res)
return goToWork()
}).then(res => {
console.log(res)
return offWork()
}).then(res => {
console.log(res)
return sleep()
}).then(res => {
console.log(res)
})
Promise是链式调用，虽然看起来更浅显易懂，但是还是没有避免大量的嵌套，接着我们看下Generator生成器函数
Generator生成器函数
function ajax(url, sucessC) {
axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/' + url).then(sucessC)
}
// Generator
function getUp() {
ajax('asynctest1', res => {
console.log(res.data.data)
day.next()
})
}
function goToWork() {
ajax('asynctest2', res => {
console.log(res.data.data)
day.next()
})
}
function offWork() {
ajax('asynctest3', res => {
console.log(res.data.data)
day.next()
})
}
function sleep() {
ajax('asynctest4', res => {
console.log(res.data.data)
})
}
function *generator() {
yield getUp()
yield goToWork()
yield offWork()
yield sleep()
}
let day = generator()
day.next() // 启动生成器
一般很少有人会通过Generator实现多个异步同步执行，接下来就是我们昨天讲的async
async
function getUp() {
return axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/asynctest1').then(res => {
console.log(res.data.data)
})
}
function goToWork() {
return axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/asynctest2').then(res => {
console.log(res.data.data)
})
}
function offWork() {
return axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/asynctest3').then(res => {
console.log(res.data.data)
})
}
function sleep() {
return axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/asynctest4').then(res => {
console.log(res.data.data)
})
}
async function day() {
await getUp()
await goToWork()
await offWork()
await sleep()
}
day()
因为axios返回的是个Promise，Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果
以上几个例子都是都是输出：
我们说起异步，之前首先想到的是回调函数，但是回调函数存在各种问题， ES6中出现了Promise，解决了回调函数问题，Promise中我们又介绍了几个常用的API
Promise.then()、Promise.catch()、Promise.all()、Promise.race()、Promise.finally()
我们后来又介绍了Generator，通过Generator引出了async await，
async就是Generator的语法糖，简化了Generator的使用方法
async无法取代Promise，async的使用依赖于Promise
有人说async await是处理异步的终极方案，这个说法有些极端
处理异步的方法我们介绍很多，没有最好的，只有最合适的
会的多了，选择也就多了，代码质量自然就会高
所以，这几种异步的处理方式我们都要学会
关于JS异步系列的讲解，就介绍到这里了，如果还有什么不了解的就多回顾我之前的篇章
友情链接：点击查看所有文章目录