Promise, async, await实现异步编程，代码详解

写在开头

一点题外话

其实最近在不断的更新Java的知识，从基础到进阶，以及计算机基础、网络、WEB、数据库、数据结构、Linux、分布式等等内容，预期写成一个既可以学习提升又可以面试找工作的《Java成长之路》！算是对自己学习的总结（笔记），也算是一种程序猿的记忆，现在大环境那么差，万一哪天转行了，还能当做一种记忆。

以往的博客都是按照知识点的顺序发的，但今天一个大一的粉丝私信问JS异步编程内容，决定先理一理这块内容，想着后面如果还是有类似的咨询，则会破坏原有发文顺序，进行交叉更新，最后，会将所有内容汇总成PDF，发给需要的朋友哈。

回到话题

ok,那我们现在就一起来学习一下JS的异步编程吧，异步的诞生是因为同步带来的诸多不便，我们都知道JavaScript是单线程时间循环模型，同步如同流水线，一步步的往下走中间有步骤失败，下面的功能就无法进行，这显然不是我们想要的。我们想要的是，一个程序在执行的过程中，我们可以去干其他的，不需要等待它的完成再往下执行，这就是异步！

异步编程

什么是异步编程？刚刚的大白话已经点名，为了能更直观的感受，我们看下面这段代码：

【代码示例1】

javascript 复制代码

const i = 'HelloWord';
setTimeout(() => {
    console.log('JavaBuild')
}, 2000);
console.log(i)

我们上面说了JS是单线程的，在这个主线程中，我们通过setTimeout()这个回调函数，实现了异步。控制台运行的时候我们就会发现，HelloWord先打印，等2秒后打印JavaBuild。

这种通过简单的回调函数实现异步，在复杂的代码逻辑中，多个异步操作时会带来"回调地狱"，因此同样不常用。

Promise

为了优化（注意是优化，并不是彻底解决回调地狱）多层嵌套的异步调用，Promise（承诺） 应运而生。
Promise 对象表示异步操作最终的完成（或失败）以及其结果值。

一个 Promise 是一个代理，它代表一个在创建 promise 时不一定已知的值。它允许你将处理程序与异步操作的最终成功值或失败原因关联起来。这使得异步方法可以像同步方法一样返回值：异步方法不会立即返回最终值，而是返回一个 promise，以便在将来的某个时间点提供该值

通过Promise我们可以实现相同的效果

【代码示例2】

javascript 复制代码

new Promise((resolveOuter) => {
    resolveOuter(
        new Promise((resolveInner) => {
            setTimeout (() => {
                console.log("resolveInner");
            }, 1000 );

        }),
    );
    console.log('resolveOuter')
});

此 Promise 在创建时已经被解决（因为 resolveOuter 是同步调用的），但它是用另一个 Promise 解决的，因此在内部 Promise 兑现的 1 秒之后才会被兑现。

Promise的链式调用

Promise.prototype.then()、Promise.prototype.catch() 和 Promise.prototype.finally() 方法用于将进一步的操作与已敲定的 Promise 相关联。由于这些方法返回 Promise，因此它们可以被链式调用。

【代码示例3】

javascript 复制代码

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("JavaBuild");
  }, 300);
});

myPromise
  .then(handleFulfilledA)
  .then(handleFulfilledB)
  .then(handleFulfilledC)
  .catch(handleRejectedAny);

关于Promise相关的详细内容这里不再赘述了，因为真实的使用中，我们一般也不会这样写，感兴趣的同学，可以看这篇文章一文看懂Promise

async / await

在ES8语法中带来了两个新词async 和 await，进一步的通过异步函数实现异步操作，并将Promise（期约）应用于JavaScript函数的结果。

async 关键字用于声明异步函数，它可以在函数声明，函数表达式还有箭头函数上使用，使用async关键字可以让函数具有异步特征，在实际中它需要和await配合使用。

【代码示例4】

javascript 复制代码

    async function msg(){}
    let jackson = async function(){}
    let jackson = async ()=>{}

一旦定义了一个函数作为一个异步函数，我们就可以使用 await 关键词。这个关键词放在回调的Promise之前，将会暂停执行函数，直到Promise执行或拒绝。

【代码示例5】

javascript 复制代码

 async function msg(){
        let p = new Promise((resolve,reject)=>setTimeout(resolve,1000,'JavaBuild'));
        console.log(await p);
    }
 msg();

await关键字其实很简单，js运行在碰到await关键字时，会记录在哪里暂停执行。等到await右边的值可以使用了，就是处理完回调了，js会向消息列对中推送一个任务，这个任务会恢复异步函数的执行。这样的话，即使await后面跟着一个立即可用的值，函数的其余部分也会被异步求值。

【代码示例6】

javascript 复制代码

    async function fun01(){
        console.log(await Promise.resolve('第一名'));
    }
    async function fun02(){
        console.log(await '第二名');
    }
    async function fun03(){
        console.log('第三名');
    }
    fun01();
    fun02();
    fun03();

大家猜一猜最终打印出来的结果顺序是啥？

javascript 复制代码

//因为await原因，fun01，fun02进入暂停队列，fun03先执行，返回已解决（已敲定）的Promise后，进入fun01，执行返回后，在进入fun02。
第三名
第一名
第二名

ok，以上就是简单的JS异步编程啦！

结尾彩蛋

如果本篇博客对您有一定的帮助，大家记得留言+点赞+收藏呀。原创不易，转载请联系Build哥！