Re0：从零开始的JavaScript - 异步流程控制

作者: 凉宫春日的简书 | 来源:发表于2019-07-02 16:23 被阅读0次

前言：

在异步编程中，一直在使用Promise。期间一直想做个深入的研究，无奈一直比较忙（懒），今天总算是抽出时间（上班偷懒）来总结一下：

image

参考资料：

《你不知道的JavaScript》 - 中卷

《体验异步的终极解决方案-ES7的Async/Await》(https://cnodejs.org/topic/5640b80d3a6aa72c5e0030b6)

《ES6入门》 (http://es6.ruanyifeng.com/#docs/async)

《如何正确学习Node.js》 - 知乎Live 狼叔(i5ting)

从JavaScript程序执行说起，JavaScript程序总是至少分为两块：一块是同步，一块是异步，尽管程序是一块一块执行的，但是所有这些块共享对程序作用域和状态的访问，所以对状态的修改都是在之前累积的修改之上的进行的。

一旦有事件需要运行，事件循环（Event Loop）就会运行，直到队列清空，异步总是在同步之后执行，这里不细谈。

JavaScript是单线程的，多个事件，执行速度快的话，看起来就像是并发运行。实际上是多个事件在线程上交替执行：

var a = 1, b = 2;
/* 块1
function foo() {
    a++;
    b = b * a;
    a = b + 3;
}
*/

/* 块2
function bar() {
    b--;
    a = 8 + b;
    b = a * 2;
}
*/

// ajax()为某个库提供的某个Ajax函数
ajax("http://...", foo);
ajax("http://...", bar);

块1和块2哪个先运行都有可能，JavaScript特性中，这种函数顺序不确定性就是通常所说的竞态条件（race condition）。

一、回调（callback）

简单说回调方法就是将一个方法func2作为参数传入另一个方法func1。

当func1执行到某一步或者满足某种条件的时候才执行传入的参数func2，

如果我要让上面代码请求相应后先执行块2 再执行块1：

/* 块1
function foo(func) {
    a++;
    b = b * a;
    a = b + 3;
    func();
}
*/

/* 块2
function bar() {
    b--;
    a = 8 + b;
    b = a * 2;
}
*/

// ajax("http://...", bar(ajax1));
function ajax1() {
    ajax("http://...", foo);
}

当我们业务逻辑越来越多的时候，闻名JS界的回调地狱（callback hell）来了 ↓↓↓

回调地狱图片:

image

这只是一部分问题，还有其他的一些，比如控制反转，BUG追踪...

随着JavaScript越来越多成熟，对于异步编程领域的发展，回调已经不够用了。我们需要比回调更高级，功能更强大的异步模式。

二、Promise

image

Promise是异步编程的一种解决方案，它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败

基本用法：

new Promise((resolve, reject) => {
    // do something
    setTimeout(function () {
        resolve(1);
    }, 500);
}).then((data) => {
    console.log('data:' + data); // data:1
})

注意：实例化的Promise对象会立即执行

这时候你应该有所领悟了，原来then里面的函数就跟我们平时的回调函数一个意思，能够在runAsync这个异步任务执行完成之后被执行。

这就是Promise的作用了，简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

回调太多的时候，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。
链式写法：

function async_1(data) {
    return new Promise((resolve, reject) => { 
        // do something...
        console.time('异步_1执行 完成');
        setTimeout(function () {
            resolve(data);
        }, 500);
    });
}

async_1(1)
.then((data) => {
    console.timeEnd('数据：'+　++data);
    return async_1(data);
})
.then((data) {
    console.timeEnd('数据：'+　++data);
    return '执行完毕';
})
.then((msg)=> {
 console.timeEnd(msg); 
})

如果Promise链中的某个步骤出错了怎么办？

.catch()

错误和异常是基于每个Promise的，这意味着可能在链的任意位置捕捉到这样的错误，而这个捕捉动作在某种程度上就相当于在这个位置将整条链 “重置” 回了正常运作

function async_2() {
    return new Promise((resolve, reject) => {
        // do something...
        var data = Math.random() * 10 | 0;
        setTimeout(function () {
            if (data <= 5) {
                resolve(data);
            } else {
                reject(data);
            }
        }, 500);
    });
}

async_2()
.then(function (data) {
    console.log('数字刚好：'+data); //数字刚好：5
    return async_2();
})
.then(function (data) {
    console.log('数字刚好：'+data); // 数字刚好：1
})
.then(function (data) {
    console.log('执行完毕 - '+data); //执行完毕 - undefined
})
.catch(function (err) {
    console.log('数字太大了：' + err); // 数字太大了： 6
})

.catch()的作用是捕获Promise的错误，与then()的rejected回调作用几乎一致。但是由于Promise的抛错具有冒泡性质，能够不断传递，这样就能够在下一个catch()中统一处理这些错误。

同时catch()也能够捕获then()中抛出的错误，所以建议不要使用then()的rejected回调，而是统一使用catch()来处理错误。

上面代码可能会出错，进到catch方法里面去，而且把错误原因传到了err参数中。即便是有错误的代码也不会报错了，这与我们的try/catch语句有相同的功能。

Promise 模式

Promise.all([..])

在Promise链中，任意时刻都只能有一个异步任务正在执行 —— 步骤2只能在步骤1之后，步骤3只能在步骤2之后。

如果想要同时执行两个或更多步骤呢？

门（gate）是这样一种机制要等待两个或更多并行任务都完成才继续。顺序不重要，但必须都要完成，门才能打开并让流程控制继续

function async_3() {
    return new Promise((resolve, reject) => {
        // do something...
        var data = Math.random() * 10 | 0;
        console.time(data);
        setTimeout(function () {
            resolve(data);
        }, 500);
    });
}
function async_4() {
    return new Promise((resolve, reject) => {
        // do something...
        var data = Math.random() * 10 | 0;
        // console.time(data);
        setTimeout(function () {
            reject(data);
        }, 1500);
    });
}

Promise.all([async_3(),async_4()])
.then((datas) => {
    console.timeEnd(datas[1]);
}).catch((err) => {
    console.log(err);
})

从Promise.all 返回的主promise在且仅在所有的成员promise都完成后才会完成。如果这些promise中有任何一个被拒绝的话，主Promise.all就会立即被拒绝，并丢弃来自其他所有promise的全部结果。

Promise.race([])

和all类似，race是第一个执行完后此时then里面就执行了。可是，其他函数仍旧会执行完毕。

笔者推荐windows用户网速是小水管的情况下使⽤ https://devdocs.io/ 查看离线⽂档，经常查看离线⽂档，对Api理解会深⼊很多，⽐IDE
辅助要好，可以有效避免离开IDE就不会写代码的窘境。

Promise 缺点

首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。

其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。

第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

Promise 性能

不得不说，Promise给我们提供了保护的同时，相比基本的基于回调的异步任务链要慢一点。但是耿耿于微小的性能损失而无视它提供的所有优点，合适吗？

Promise总结

Promise 并没有摈弃回调，只是把回调的安排转交给了一个位于我们和其他工具之间的可信任性的中介机制。

再来介绍 ES7 - Async/Await

image

该新特性就如名字一样 “异步”/“等待” ，处理异步最简单粗暴的方法

看了下面的栗子就能知道个大概：

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve('up');
        }, time);
    })
};

var start = async function () {
    // 在这里使用起来就像同步代码那样直观
    console.log('start');
    // await等待的虽然是promise对象，但不必写.then(..)，直接可以得到返回值
    let status = await sleep(3000);
    console.log('end. I ' + status); // 'end. I up'
};

start();

其实async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

那我们为什么要去使用它呢？

更好的语义
不需要执行器，它本身具备执行能力，不像Generator需要co模块
Await接Promise， Promise⾃身就⾜够应对所有流程了，包括async函数没有纯并⾏处理机制，也可以采⽤Promise⾥的all和race来补⻬
更广的适用性(async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。)

错误处理

如果await后面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject

async function f() {
    await new Promise(function (resolve, reject) {
        throw new Error('出错了');
    });
}

f()
.then(v => console.log(v))
.catch(e => console.log(e))

Error：出错了

上面代码中，async函数f执行后，await后面的 Promise 对象会抛出一个错误对象，导致catch方法的回调函数被调用，它的参数就是抛出的错误对象。

一般防止出错的方法，也是将其放在try...catch代码块之中

async function f() {
  try {
    await new Promise(function (resolve, reject) {
      throw new Error('出错了');
    });
  } catch(e) {
  }
  return await('hello world');
}

如果有多个await命令，可以统一放在try...catch结构中

async function main() {
    try {
      const val1 = await firstStep();
      const val2 = await secondStep(val1);
      const val3 = await thirdStep(val1, val2);
  
      console.log('Final: ', val3);
    }
    catch (err) {
      console.error(err);
    }
}

并发处理

多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发

let foo = await getFoo();
let bar = await getBar();

上面代码中，getFoo和getBar是两个独立的异步操作（即互不依赖），被写成继发关系。这样比较耗时，因为只有getFoo完成以后，才会执行getBar，完全可以让它们同时触发。

写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

实际开发中，经常遇到一组异步操作，需要按照顺序完成。比如，依次远程读取一组 URL，然后按照读取的顺序输出结果例如：

async function logInOrder(urls) {
    for (const url of urls) {
      const response = await fetch(url);
      console.log(await response.text());
    }
}

上面代码问题是所有远程操作都是继发。只有前一个 URL 返回结果，才会去读取下一个 URL，这样做效率很差，非常浪费时间。我们需要的是并发发出远程请求。

async function logInOrder(urls) {
    // 并发读取远程URL
    const textPromises = urls.map(async url => {
      const response = await fetch(url);
      return response.text();
    });
  
    // 按次序输出
    for (const textPromise of textPromises) {
      console.log(await textPromise);
    }
}

上面代码中，虽然map方法的参数是async函数，但它是并发执行的，因为只有async函数内部是继发执行，外部不受影响。后面的for..of循环内部使用了await，因此实现了按顺序输出。

注意的点

await命令只能用在async函数之中，如果用在普通函数，就会报错

async function dbFuc(db) {
    let docs = [{}, {}, {}];
  
    // 报错
    docs.forEach(function (doc) {
      await db.post(doc);
    });
}

上面代码会报错，因为await用在普通函数之中了。但是，如果将forEach方法的参数改成async函数，也有问题。

async function dbFuc(db) {
    let docs = [{}, {}, {}];
  
    for (let doc of docs) {
      await db.post(doc);
    }
}

总结

首先Promise是基础，对于初学者来说，先够⽤，再去深究细节，其次async/await + Promise 可解决大部分场景。

吐槽一下

JavaScript技术发展真的是指数爆炸般的增长，真心学不过来。

image

... 啊啊啊啊，说到底还是得掌握好原理

Re0：从零开始的JavaScript - 异步流程控制

前言：

参考资料：

一、回调（callback）

二、Promise

基本用法：

.catch()

Promise 模式

Promise.all([..])

Promise.race([])

Promise 缺点

Promise 性能

Promise总结

再来介绍 ES7 - Async/Await

错误处理

并发处理

注意的点

总结

吐槽一下

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

工作生活