理解 JavaScript 的 Promise 和 async/await

最新推荐文章于 2023-05-16 23:16:32 发布
最新推荐文章于 2023-05-16 23:16:32 发布
阅读量371 收藏 1
点赞数
分类专栏： Javascript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lizhi1030/article/details/126967561
版权

Promise 的介绍和优点

ES6 中的 Promise 是异步编程的一种方案。从语法上讲，Promise 是一个对象，它可以获取异步操作的消息。
Promise 对象, 可以用同步的表现形式来书写异步代码（也就是说，代码看起来是同步的，但本质上的运行过程是异步的）。使用 Promise 主要有以下好处：

  • 1、可以很好地解决回调地狱的问题（避免了层层嵌套的回调函数）。
  • 2、语法简洁、可读性强，便于后期维护。
  • 3、Promise 对象提供了简洁的 API，使得管理异步操作更加容易。比如多任务等待合并。

使用 Promise 的基本步骤

（1）通过 new Promise() 构造出一个 Promise 实例。Promise 的构造函数中传入一个参数，这个参数是一个函数，该函数用于处理异步任务。
（2）函数中传入两个参数：resolve 和 reject，分别表示异步执行成功后的回调函数和异步执行失败后的回调函数。代表着我们需要改变当前实例的状态到已完成或是已拒绝。
（3）通过 promise.then() 和 promise.catch() 处理返回结果（这里的 promise 指的是 Promise 实例）。

Promise 的实例方法

Promise 的自带 API 提供了如下实例方法：

  • promise.then()：获取异步任务的正常结果。
  • promise.catch()：获取异步任务的异常结果。
  • promise.finaly()：异步任务无论成功与否，都会执行。

Promise 的静态方法

Promise 的自带 API 提供了如下静态方法：

  • Promise.resolve()
  • Promise.reject()
  • Promsie.all()：并发处理多个异步任务，所有任务都执行成功，才算成功（走到 resolve）；只要有一个失败，就会马上走到 reject，整体都算失败。
  • Promise.race()：并发处理多个异步任务，返回的是第一个执行完成的 promise，且状态和第一个完成的任务状态保持一致。
  • Promise.allSettled()：并发处理多个异步任务，返回所有任务的执行结果（包括成功、失败）。当你有多个彼此不依赖的异步任务执行完成时，或者你想知道每个 promise 的结果时，通常使用它。
  • Promise.all()
  • Promise.any()

看到这里，你估计还是不知道 Promise 怎么使用。我们不妨来看一下 Promise 有哪些状态，便一目了然。要知道，Promise 的精髓在于对异步操作的状态管理。

promise 对象的 3 个状态

  • 初始化（等待中）：pending
  • 成功：fulfilled
  • 失败：rejected

小结

1、promise 有三种状态：等待中、成功、失败。等待中状态可以更改为成功或失败，已经更改过状态后⽆法继续更改（例如从失败改为成功）。
2、promise 实例中需要传⼊⼀个函数，这个函数接收两个参数，执⾏第⼀个参数之后就会改变当前 promise 为「成功」状态，执⾏第⼆个参数之后就会变为「失败」状态。
3、通过 .then ⽅法，即可在上⼀个 promise 达到成功时继续执⾏下⼀个函数或 promise。同时通过 resolve 或 reject 时传⼊参数，即可给下⼀个函数或 promise 传⼊初始值。
4、失败的 promise，后续可以通过 promise 自带的 .catch ⽅法或是 .then ⽅法的第⼆个参数进⾏捕获。

宏任务和微任务

准备知识

  • 在执行一个 Promise 对象的时候，当走完resolve();之后，就会立刻把 .then()里面的代码加入到微任务队列当中。
  • 任务的一般执行顺序：同步任务 --> 微任务 --> 宏任务。

举例 1：宏任务和微任务的执行顺序

setTimeout(() => {
    // 宏任务
    console.log('setTimeout');
}, 0);

new Promise((resolve, reject) => {
    resolve();
    console.log('promise1'); // 同步任务
}).then((res) => {
    // 微任务
    console.log('promise then');
});

console.log('qianguyihao'); // 同步任务

打印结果：

promise1
qianguyihao
promise then
setTimeout

上方代码执行的顺序依次是：同步任务 --> 微任务 --> 宏任务。

举例 2：宏任务和微任务的嵌套

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
        console.log('setTimeout'); // 宏任务
    }, 0);
    console.log('promise1');
}).then((res) => {
    // 微任务
    console.log('promise then');
});

console.log('qianguyihao');

打印结果：

promise1
qianguyihao
setTimeout
promise then

上方代码解释：在执行宏任务的过程中，创建了一个微任务。但是需要先把当前这个宏任务执行完，再去创建并执行微任务。

async/await （异步函数）概述

async/await 是在 ES8(即ES 2017）中引入的新语法，是另外一种异步编程解决方案。
本质： 是 Generator 的语法糖。

  • async 的返回值是 Promise 实例对象。
  • await 可以得到异步结果。

我们在普通的函数前面加上 async 关键字，就成了 async 函数。
什么是语法糖呢？语法糖就是让语法变得更加简洁、更加舒服，有一种甜甜的感觉。

async 起什么作用

async function testAsync() {
    return "hello async";
}

const result = testAsync();
console.log(result); // 输出的是一个 Promise 对象。

所以，async 函数返回的是一个 Promise 对象。从文档中也可以得到这个信息。async 函数（包含函数语句、函数表达式、Lambda表达式）会返回一个 Promise 对象。如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

async 函数返回的是一个 Promise 对象，所以在最外层不能用 await 获取其返回值的情况下，我们当然应该用原来的方式：then() 链来处理这个 Promise 对象，就像这样

testAsync().then(v => {
    console.log(v);    // 输出 hello async
});

await 到底在等啥

一般来说，都认为 await 是在等待一个 async 函数完成。不过按语法说明，await 等待的是一个表达式，这个表达式的计算结果是 Promise 对象或者其它值（换句话说，就是没有特殊限定）。所以下面这个示例完全可以正确运行：

function getSomething() {
    return "something";
}

async function testAsync() {
    return Promise.resolve("hello async");
}

async function test() {
    const v1 = await getSomething();
    const v2 = await testAsync();
    console.log(v1, v2);
}

test();

async/await 的优势在于处理 then 链

假设一个业务，分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。

/**
 * 传入参数 n，表示这个函数执行的时间（毫秒）
 * 执行的结果是 n + 200，这个值将用于下一步骤
 */
function takeLongTime(n) {
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 200), n);
    });
}

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}

function step2(n) {
    console.log(`step2 with ${n}`);
    return takeLongTime(n);
}

function step3(n) {
    console.log(`step3 with ${n}`);
    return takeLongTime(n);
}

现在用 Promise 方式来实现这三个步骤的处理

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}

doIt();

// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
// doIt: 1507.251ms

输出结果 result 是 step3() 的参数 700 + 200 = 900。doIt() 顺序执行了三个步骤，一共用了 300 + 500 + 700 = 1500 毫秒，和 console.time()/console.timeEnd() 计算的结果一致。

如果用 async/await 来实现呢，会是这样

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time2);
    const result = await step3(time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}

doIt();

结果和之前的 Promise 实现是一样的，但是这个代码看起来是不是清晰得多，几乎跟同步代码一样。

Promise 方案的死穴—— 参数传递太麻烦了
现在把业务要求改一下，仍然是三个步骤，但每一个步骤都需要之前每个步骤的结果。

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}

function step2(m, n) {
    console.log(`step2 with ${m} and ${n}`);
    return takeLongTime(m + n);
}

function step3(k, m, n) {
    console.log(`step3 with ${k}, ${m} and ${n}`);
    return takeLongTime(k + m + n);
}

这回先用 async/await 来写：

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time1, time2);
    const result = await step3(time1, time2, time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}

doIt();

// step1 with 300
// step2 with 800 = 300 + 500
// step3 with 1800 = 300 + 500 + 1000
// result is 2000
// doIt: 2907.387ms

除了觉得执行时间变长了之外，似乎和之前的示例没啥区别啊！别急，认真想想如果把它写成 Promise 方式实现会是什么样子？

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => {
            return step2(time1, time2)
                .then(time3 => [time1, time2, time3]);
        })
        .then(times => {
            const [time1, time2, time3] = times;
            return step3(time1, time2, time3);
        })
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}

doIt();

那一堆参数处理，有没有感觉有点复杂的样子？这时候就更能体现 async/await 的好处了吧？

基于 async/await 处理多次 Ajax 请求【重要】

实际开发中，现在有三个网络请求，请求2必须依赖请求1的结果，请求3必须依赖请求2的结果，如果按照往常的写法，会有三层回调，会陷入“回调地狱”。

这种场景其实就是接口的多层嵌套调用。之前学过 Promise，它可以把原本的多层嵌套调用改进为链式调用。

而今天要学习的 async/await ，可以把原本的“多层嵌套调用”改成类似于同步的写法，非常优雅。

Promise、async…await、Generator的对比

我们在使用 Promise、async…await、Generator 的时候，返回的都是 Promise 的实例。

如果直接使用 Promise，则需要通过 then 来进行链式调用；如果使用 async…await、Generator，写起来更像同步的代码。

发福爹
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Promise初识和async，await的关系
努力努力再努力的博客
06-10 259
async用于定义一个异步函数，它会返回一个Promise对象，而await用于等待Promise对象的状态变化。Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），它们分别表示异步操作的不同阶段。因此，可以说promise是异步编程的基础，而async和await则是Promise的进一步封装，使得异步编程更加方便和易用。promise和async，await是JavaScript中的两个重要概念，它们之间有着紧密的关系。
深入理解JavaScript的async/await
01-19
async 和 await 在干什么 任意一个名称都是有意义的，先从字面意思来理解。async 是“异步”的简写，而 await 的意思是等待。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 等待某个操作完成。 那么async/await到底是干嘛的呢？我们先来简单介绍一下。 async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。 async/await 是建立在 promise 的基础上。（对promise不熟悉的同学可以看一下这篇文章入门Promise的正确姿势） async/await 像 p
【前端知识点】promise简书-30分钟带你搞懂promise面试必备
热门推荐
chaunceyw的博客
09-17 1万+
前言 写作初衷 本书的目的是以目前还在制定中的ECMAScript 6 Promises规范为中心，着重向各位读者介绍JavaScript中对Promise相关技术的支持情况。 通过阅读本书，我们希望各位读者能在下面三个目标上有所收获。 学习Promise相关内容，能熟练使用Promise模式并进行测试 学习Promise适合什
Promise、async/await详解
喵喵的博客
07-29 1769
Promise的概念介绍 Promise 是一个 构造函数，我们就可以 new Promise() 得到一个 Promise 的实例，这个实例，是一个具体的异步操作。异步操作的结果，只能有两种状态： 异步执行成功了，需要在内部调用 成功的回调函数 resolve 把结果返回给调用者； 异步执行失败了，需要在内部调用 失败的回调函数 reject 把结果返回给调用者； 在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数
ES7 async/await 的应用
高先生的猫
07-30 309
async/await是什么? async 是"异步"的意思，await是async wait的简写,顾名思义我们就可以理解为等待异步函数的执行完成 async函数返回的是一个Promise 对象,如果在函数中直接 return一个值，async 会把这个直接量通过Promise.resolve( )封装成 Promise 对象。 我们可以通过以下这段代码来说明这个结论: 上面我们说到,await 用于等待 async函数的返回值 await 不仅仅用于等 Promise 对象，它可以等任...
C#网页解析获得HTML中JS变量，一个是浏览器交互（EvaluateScriptAsync），一个是HtmlAgilityPack解析
chenxiaotao22的专栏
11-28 8427
var task = control.Browser.EvaluateScriptAsync(@”observe24h_data”); task.Wait(); //获得observe24h_data变量，与上面方法相同，一个是浏览器交互，一个是HtmlAgilityPack解析。 var task1 = control
async / await 和 Promise 的关系
小魔仙的成长之路
01-25 1893
背景： 1.异步回调地狱 callback hell; 2.Promise 是基于 then catch 的链式调用，但也是基于回调函数； 3. async / await 是同步语法去编写异步代码，彻底消灭回调函数，但它也只是一个语法糖，从语法层面去解决 回调地狱； 关系： async / await 和 Promise 并不互斥，二者相辅相成。 async / await 并不能改变异步的本质（ js是单线程的，异步需要回调，都是要基于 event loop 来实现）。 await 后面的
JavaScript的Promise和异步函数 async-await
gdtown的博客
07-17 513
promise是js的异步请求机制，再ES6时代引入官方的js文档，解决之前的回调函数引起的回调地狱
JavaScript异步编程：Async、await与Promise
m0_47584501的博客
10-12 3361
JavaScript异步编程
async/await和promise有啥子关联？
alive_new的博客
05-16 126
在上面的代码示例中，如果 fetch() 函数返回的状态码不是 200，那么 Promise 将被拒绝，并抛出一个错误。在上面的代码示例中，如果 fetch() 函数返回的 Promise 被拒绝，而没有添加 .catch() 方法来处理错误，那么错误就会被忽略，从而导致应用程序出现问题。在上面的代码示例中，fetchData() 函数返回了一个对象，但是没有返回一个 Promise 对象，所以无法使用 .then() 方法来处理结果。的方法，它们各有不足之处，需要根据具体的情况来选择使用哪种方法。
JavaScript中的async/await
01-08
await 也是一个修饰符，await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值。 那么async/await到底是干嘛的呢？ 1.async/await...
由回调函数、Promise到async/await的同步写法执行异步代码
01-08
由回调函数、Promise到async/await的同步写法执行异步代码 同步异步是前端面试中经常遇到的问题，虽然不难，但是搞清楚两者之间的关系和转换还是很重要 同步 同步是一种线性执行的方式，执行的流程不能跨越，其后的...
Js中async/await的执行顺序详解
12-11
虽然大家知道async/await，但是很多人对这个方法中内部怎么执行的还不是很了解，本文是我看了一遍技术博客理解 JavaScript 的 async/await（如果对async／await不熟悉可以先看下这篇文章）后拓展了一下，我理了一下...
使用async / await或Promises时可使数组迭代容易的实用程序-JavaScript开发
05-26
p-iteration使用async / await时使数组迭代变得容易并保证与ES5 Array迭代方法相同的功能我们都知道，所有方法都返回Promise，使其可以等待并且随后允许Allow p-iteration使用async / await时使数组迭代变得容易并...
async/await最详细的讲解
04-24 4766
async/await最详细的讲解
promise then err_必考：Promise、acync进化史
weixin_39913105的博客
11-26 85
2020年9月2日《每周一题系列 》作者：Russ博客：掘金、知乎点赞再看，养成习惯，每周一题系列会一直更新下去，你们的支持是我持续分享的最大动力 【目录】1. Promise2. async/await【正文】一.PromisePromise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。优点：规范回调的名字和顺序拒绝回调地狱，让代码可读性更强很方便的捕获错误...
async/await与promise
weixin_43801836的博客
08-17 1199
async 会将其后的函数的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。（ Promise 的特点——无等待），所以在没有 await 的情况下执行 async 函数，它会立即执行，返回一个 Promise 对象，并且，绝不会阻塞后面的语句。async 是“异步”的简写，而 await 的意思是等待，async/await 是建立在 promise 的基础上， 像 promise 一样，也是非阻塞的。......
Promise、async/await的理解以及区别
ysj1218的博客
03-04 3619
promise、async、await有什么用呢，怎么理解？ 都是为了解决异步回调产生的。 Promise好比容器，里面存放着一些未来才会执行完毕的事件的结果，而这些结果一旦生成是无法改变的。 async和await遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。 promise与async、await的区别? promise的出现解决了传统callback函数导致的地狱回调问题，但是他的语法导致它纵向发展
JS总结——Promise与async，await
qq_53008257的博客
05-01 5017
Promise是什么? Promise是JS中进行异步编程的新解决方案(ES6规范) 异步任务:例如文件IO，AJAX,定时器等等，异步任务，简单地说，异步任务就是把任务先放一放，等当前手头的任务处理完之后再处理。 为什么要使用Promise 在Promise出现之前，我们想要执行异步函数，必须先指定其回调。 如果想要在基于第一个异步任务的处理结果执行第二个异步任务，那么我们就需要再第一个异步任务的回调函数中编写第二个异步任务的回调函数。 这样会产生一个回调地狱的问题。 即 如图所示，代码疯狂缩进，回调函数
Promise 和 async/await
最新发布
06-12
Promise 和 async/await 都是 JavaScript 中处理异步编程的方法。 Promise 是一种处理异步操作的方式，它可以将异步操作包装成一个 Promise 对象并返回，然后使用 then() 方法来处理异步操作成功的结果，使用 catch...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值