异步编程控制方法

2018-03-15 本文已影响0人 ilgb

javascript 具有的一个特性就是异步编程。异步编程具有的优势本文不做细说，本文主要是总结如何异步编程中出现的问题和解决办法。

回调地狱

什么是回调地狱？不妨看看下面这个例子：

dothing1(arg,function(err){
    if(err){
        throw err;
    }
    else{
        dothing2(arg,function(err){
            if(err){
                throw err;
            }
            else {
                dothing3(arg,function (err) {
                    if(err){
                        throw err;
                    }
                    else{
                        dothing...
                    }
                })
            }
        })
    }
})

回调函数如此一层一层嵌套下去结果是可想而知。
首先是代码逻辑不好理解，其次是错误不好捕捉，回调函数中的结果返回处理也比较麻烦等等。
这种代码可能平时很少写到这样的逻辑，但是，在node中，数据库的查找，文件读取等等的操作对于这种逻辑可以说是家常便饭了。其实前端在写一些事件监听的逻辑时也会遇到回调地狱的逻辑。
怎么解决呢?

事件发布/订阅模式
node 中的eventEmitter 详情可以到官网看看，主要是掌握监听器（listener）的增加和删除，以及只调用一次的.one.
Promise

A Promise is an object that is used as a placeholder for the eventual results of a deferred (and possibly
asynchronous) computation----EcmaScript 2017

对于Promise，我们需要掌握什么内容呢？
先来看看mdn上Promise的目录:

可以很直观看出Promise具备的方法。方法的具体内容不做讲述。
我们来看看Promise是如何使用的。

var promiseCount = 0;

function testPromise() {
    let thisPromiseCount = ++promiseCount;

    let log = document.getElementById('log');
    log.insertAdjacentHTML('beforeend', thisPromiseCount +
        ') 开始 (<small>同步代码开始</small>)<br/>');

    // 新构建一个 Promise 实例：使用Promise实现每过一段时间给计数器加一的过程，每段时间间隔为1~3秒不等
    let p1 = new Promise(
        // resolver 函数在 Promise 成功或失败时都可能被调用
       (resolve, reject) => {
            log.insertAdjacentHTML('beforeend', thisPromiseCount +
                ') Promise 开始 (<small>异步代码开始</small>)<br/>');
            // 创建一个异步调用
            window.setTimeout(
                function() {
                    // 填充 Promise
                    resolve(thisPromiseCount);
                }, Math.random() * 2000 + 1000);
        }
    );

    // Promise 不论成功或失败都会调用 then
    // catch() 只有当 promise 失败时才会调用
    p1.then(
        // 记录填充值
        function(val) {
            log.insertAdjacentHTML('beforeend', val +
                ') Promise 已填充完毕 (<small>异步代码结束</small>)<br/>');
        })
    .catch(
        // 记录失败原因
       (reason) => {
            console.log('处理失败的 promise ('+reason+')');
        });

    log.insertAdjacentHTML('beforeend', thisPromiseCount +
        ') Promise made (<small>Sync code terminated</small>)<br/>');
}

代码是mdn上的例子输出结果是：

1) 开始 (同步代码开始)
1) Promise 开始 (异步代码开始)
1) Promise made (Sync code terminated)
1) Promise 已填充完毕 (异步代码结束)

这里需要特别注意的是各条信息的输出顺序，厘清这一点基本就懂得如何使用Promise了。值得一提的关键是找到Promise中的异步代码即本例子中

 window.setTimeout(
                function() {
                    // 填充 Promise
                    resolve(thisPromiseCount);
                }, Math.random() * 2000 + 1000);

因为是异步的所以应该放到下一个event loop执行，所以代码直接转到

 log.insertAdjacentHTML('beforeend', thisPromiseCount +
        ') Promise made (<small>Sync code terminated</small>)<br/>');

因为此时p1还没执行完毕所以then后面和catch后面代码块不会执行。
这样一来就可以很好理解Promise的代码执行顺序了，一个关键点就是找到异步代码。

async and await
async 异步函数提供了一种类似编写正常逻辑代码的的编程风格，当然，其本身还是异步的。async用起来非常顺手就跟我们写function差不多的体验，但是对于代码的执行情况我们很有必要掌握其执行情况。
下面我们来看一个简单例子(来自mdn)。

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
var a = new AsyncFunction('a', 
                          'b',
                          'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);');
a(10, 20).then(v => {
  console.log(v); // 4 秒后打印 30
});

这个例子有两个地方需要理解，理解了这两处也就知道了async/await的个中机制了。
首先是AsyFunction对象的获取，它不是全局的，不能像Function或者Array一样直接new.此外也可以直接使用

async function asyncName(){
}

其次是理解为什么是4秒后才打印30.这里需要理解一下await，await顾名思义就是等待。resolveAfter2Seconds函数返回的是一个Promise（异步），当在此前加上await时说明要在此等待紧接await其后的函数执行完毕才继续执行后面的，这里异步的Promise变成了同步执行。

以上。

异步编程控制方法

回调地狱

猜你喜欢

热点阅读