JavaScript异步实战

实战"/>

JavaScript异步实战

JavaScript异步系列的篇章到今天为止已经完结了,从回调函数 => Promise => Generator => async,现在呢我们再用同一个例子，分别用这几种异步方法来实现，自己比较下异步技术哪家强

准备工作

我们先准备好四个接口,

四个接口的返回的数据分别为 ：

刘家军起床了!
刘家军上班了!
刘家军下班了!
刘家军睡觉了!

回调函数

 function ajax(url, sucessC) {axios.get('/' + 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('/' + url).then(sucessC)}// promisefunction 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('/' + url).then(sucessC)}
// Generatorfunction 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('').then(res => {console.log(res.data.data)})}function goToWork() {return axios.get('').then(res => {console.log(res.data.data)})}function offWork() {return axios.get('').then(res => {console.log(res.data.data)})}function sleep() {return axios.get('').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异步系列的讲解，就介绍到这里了，如果还有什么不了解的就多回顾我之前的篇章

友情链接：点击查看所有文章目录

友情链接：点击查看　JavaScript异步系列文章目录