码迷,mamicode.com
首页 > Web开发 > 详细

js异步任务处理方式2

时间:2018-07-13 16:22:58      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:als   color   undefined   segment   cond   call   lan   .com   按钮   

一、es6之前:使用原始的callback函数,会陷入回掉地域

二、es6:

  1. Promise 

// 点击确定按钮时,获取面值列表
            getFaceResult () {
                this.getLocation(this.phoneNum)
                    .then(res => {
                        if (res.status === 200 && res.data.success) {
                            let province = res.data.obj.province;
                            let city = res.data.obj.city;

                            this.getFaceList(province, city)
                                .then(res => {
                                    if(res.status === 200 && res.data.success) {
                                        this.faceList = res.data.obj
                                    }
                                })
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    })
            }

Promise 的方式虽然解决了 callback hell,但是这种方式充满了 Promise的 then() 方法,如果处理流程复杂的话,整段代码将充满 then。语义化不明显,代码流程不能很好的表示执行流程。

  2. Generator 

function* G() {
    const a = yield 100
    console.log(‘a‘, a)  // a aaa
    const b = yield 200
    console.log(‘b‘, b)  // b bbb
    const c = yield 300
    console.log(‘c‘, c)  // c ccc
}
const g = G()
g.next()    // value: 100, done: false
g.next(‘aaa‘) // value: 200, done: false
g.next(‘bbb‘) // value: 300, done: false
g.next(‘ccc‘) // value: undefined, done: true

Generator 的方式解决了 Promise 的一些问题,流程更加直观、语义化。但是 Generator 的问题在于,函数的执行需要依靠执行器,每次都需要通过 g.next() 的方式去执行。

三、es7

 1. async/await 

async function testResult() {
    let first = await doubleAfter2seconds(30);
    let second = await doubleAfter2seconds(50);
    let third = await doubleAfter2seconds(30);
    console.log(first + second + third);
}

async 函数完美的解决了上面两种方式的问题。流程清晰,直观、语义明显。操作异步流程就如同操作同步流程。同时 async 函数自带执行器,执行的时候无需手动加载。

 

参考链接:https://segmentfault.com/a/1190000010244279

 

js异步任务处理方式2

标签:als   color   undefined   segment   cond   call   lan   .com   按钮   

原文地址:https://www.cnblogs.com/zhangruiqi/p/9305301.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!