async await详解 & Promise

已于 2022-08-09 22:57:47 修改
阅读量620 收藏 4
点赞数
分类专栏： 前端学习 文章标签： javascript 前端 typescript
于 2022-07-23 20:38:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16992475/article/details/125952330
版权

原文：https://www.cnblogs.com/zhongmeizhi/p/10634771.html

async await本身就是promise + generator的语法糖。

本文主要讲述以下内容

1、async awiat 实质

2、async await 主要特性

async await 实质

下面使用 promise + generate 实现 async await

 // 转换目标 async1
 // async function async1() {
 //    console.log('async1 start');
 //    await async2();
 //    console.log('async1 end');
 // }

 function async1() {
     // 将 async 转换成 *，将 awiat 转换成 yield
     var awaitInstance = (function* () {
         console.log('async1 start');
         yield async2();
         console.log('async1 end');
     })()

     // 自动执行 await 及后续代码
     // 简单起见，不处理异常情况
     function step() {
         var next = awaitInstance.next();
         // 使用Promise获取 异步/同步 方法的结果，再执行下一步
         Promise.resolve(next.value).then(function (val) {
             if (!next.done) step();
         })
     }
     step();

     // 返回Promise
     return Promise.resolve(undefined);
 }

async await 特性

1.async 一定会返回 promise

 // 案例1： 不设置return
 async function fn() {}
 fn().then(alert); // alert -> undefined

 // 案例2：return非promise
 async function f() {
     return 1
 }
 f().then(alert); // alert -> 1

 // 案例3： return Promise
 async function fn() {
     return Promise.resolve(2);
 }
 fn().then(alert); // alert -> 2

2. async 中代码是直接执行的（同步任务）

console.log(1);

async function fn() {
    console.log(2);
    await console.log(3)
    console.log(4)
 }
fn();

console.log(5);

// 打印 1 2 3 5 4
// 为何后面是 3 5 4 ? 往下看

3. await是直接执行的，而await后面的代码是 microtask。

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}

// 类似于
async function async1() {
    console.log('async1 start');
    Promise.resolve(async2()).then(() => {
        console.log('async1 end');
    })
}

4. await后面代码会等await内部代码全部完成后再执行

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}

async function async2() {
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log('sleep 2s');
            resolve('do');
        }, 2000)
    })
}

async1();

// 打印结果
// async1 start -> sleep 2s -> async1 end

5. await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。参考 MDN

  • 语法：[返回值] = await 表达式;

    • 表达式：一个 Promise 对象或者任何要等待的值。
    • 返回值：返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。

  • 描述

    • await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理 (fulfilled)，其回调的 resolve 函数参数作为 await 表达式的值，继续执行 async function。
    • 若 Promise 处理异常 (rejected)，await 表达式会把 Promise 的异常原因抛出。
    • 另外，如果 await 操作符后的表达式的值不是一个 Promise，则返回该值本身。

例子(MDN)

如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果。

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

async function f1() {
  var x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}
f1();

如果该值不是一个 Promise，await 会把该值转换为已正常处理的 Promise，然后等待其处理结果。

async function f2() {
  var y = await 20;
  console.log(y); // 20
}
f2();

如果 Promise 处理异常，则异常值被抛出。

async function f3() {
  try {
    var z = await Promise.reject(30);
  } catch (e) {
    console.log(e); // 30
  }
}
f3();

Promise

Promise参考见：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

       const p1 = Promise.resolve('1')

       const p2 = p1.then(res=>{   // 1. then后面的函数当作是p1这个Promise对象的回调函数,
                                   //    并且是p1这个Prmoise对象的状态是fullfilled时,这个函数才被执行(等待事件循环)
        console.log('res');        // 2. Promise的then函数的返回值仍然是一个Promise对象,既然是Promise对象,那么肯定就有状态,
                                   //    如果这个then函数里面抛出了异常,那么then函数返回的Promise对象就是rejected的状态
       })

       const p3 = p2.catch(err=>{  // 1. then后面的函数当作是p2这个Promise对象的回调函数,
                                   //    并且是p2这个Prmoise对象的状态是rejected时,这个函数才被执行(等待事件循环)
        console.log('err')         // 2. Promise的catch函数的返回值仍然是一个Promise对象,既然是Promise对象,那么肯定就有状态,
                                   //    如果这个catch函数里面抛出了异常,那么catch函数返回的Promise对象就是rejected的状态
       })
       const p4 = p3.then(res=>{
        console.log('p3 res');
        throw new Error('ex')
       })
       const p5 = p4.catch(err=>{
        console.log('p5 err',err);
       })

       console.log(p1)
       console.log(p2)
       console.log(p3)
       console.log(p4)
       console.log(p5)

       console.log(p1 == p2);
       console.log(p2 == p3);
       console.log(p1 == p3);
    
    </script>
</body>
</html>

new Promise(() => {
    console.log('1'); // 这个会打印
}).then(res=>{
    console.log('2'); // 这个不会打印
}).catch(err=>{
    console.log('3'); // 这个不会打印
})

// 以上没有修改promise的状态, 所以后面的then或catch都没有执行
// 但是注意在vuex中，dispatch的action默认返回Promise，即便不return，也会修改返回的promise对象

终于理清楚了Promise以及async和await https://blog.csdn.net/web13985085406/article/details/123220812

ps酷教程
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
promise 和async await
斗地主7891的专栏
09-04 901
var getJson = function (url) { var promise = new Promise(function (resolve,reject) { let client = new XMLHttpRequest(); client.open("GET",url); client.onreadsta
async await详解
qq_34230117的博客
04-01 239
async await本身就是promise + generator的语法糖。 本文主要讲述以下内容 async awiat 实质 async await 主要特性 async await 实质 下面使用 promise + generate 实现 async await // 转换目标 async1 // async function async1() { // ...
【面试】小红书一面
qq_44870156的博客
03-31 601
今天第一次参加春招面试，小红书的一面。面试主要围绕简历，从基础到框架，涉及到的范围还是很广的。下面针对这次面试做出总结。 给出代码的结果并分析 原型链及this相关 function a(){ this.b=7 } a.prototype.b=3 var b=3 a() var c=new a() console.log(b) //7 console.log(c.b) //7 注意：a()是指把a当做普通函数执行了，此时this.b指向window，若是将var b=3放到a()后面，则co
js：await对后续代码的影响
m0_64401231的博客
03-22 1337
await对后续代码的影响
await
weixin_55697644的博客
06-01 470
方法的回调函数被调用，它的参数就是抛出的错误对象。具体的执行机制，可以参考后文的“async 函数的实现原理”。命令后面是一个 Promise 对象，返回该对象的结果。函数，导致该函数的第一个参数是前一步操作返回的 Promise 对象，所以必须使用。有时，我们希望即使前一个异步操作失败，也不要中断后面的异步操作。函数的执行结果，也是一个 Promise 对象，导致在它前面也必须加上。操作将是并发执行，也就是同时执行，而不是继发执行。命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。
await async 执行顺序
weixin_46795923的博客
04-27 4230
await 执行顺序，带示例详解！！！
async 和 await（详解）
阿小绿的博客
07-19 2644
async 和 await（详解）
async await 使用代码详解
Ethan__2016的博客
12-27 143
小白版正确代码 async function fn() { function f1() { return new Promise((resolve, reject) => { setTimeout(function () { console.log(11111) resolve()...
ES7之Async/await的使用详解
10-17
ES6引入的Promise解决了这一问题，而ES7的Async/Await则进一步优化了Promise的使用体验，使得异步代码更接近同步的写法。 首先，我们需要了解Promise。Promise是一个代表未来某个时刻可能完成或失败的操作的对象。...
小程序如何支持使用 async/await详解
10-16
首先，我们要明白`async/await`实际上是基于Promise的语法糖。`async`关键字用来声明一个函数为异步函数，而`await`则用于等待Promise对象的解析结果。由于小程序不直接支持这些特性，我们需要借助像`regenerator-...
详解koa2学习中使用 async 、await、promise解决异步的问题
10-17
主要介绍了详解koa2学习中使用 async 、await、promise解决异步的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Js中async/await的执行顺序详解
12-11
`async/await`是基于Promise构建的，因此理解Promise的基本概念对于掌握`async/await`至关重要。 首先，我们来看`async`函数。`async`关键字用来定义一个异步函数，它总是返回一个Promise对象。当在`async`函数中...
详解async/await 异步应用的常用场景
10-17
async/await 是 JavaScript 中用于处理异步操作的一种方式，它引入了Promise的语法糖，使得异步代码更易于理解和编写，看起来更接近同步代码。然而，尽管async/await使得代码更加优雅，但异步的本质复杂性并未改变，...
await 与其他普通代码的执行顺序
sun13047140038的博客
08-23 607
在等待的过程中，其他代码可以继续执行。在讨论await与其他普通代码的执行顺序时，我们通常指的是在异步编程中，特别是在使用异步/await语法进行JavaScript编程时的情况。这意味着当遇到await时，JavaScript引擎可以暂停当前函数的执行，并在等待的同时执行其他可以执行的任务，从而提高程序的并发性和响应性。3.顺序执行： 尽管await可以让异步操作看起来像同步操作一样，但在异步函数内部，await之前的代码会按照顺序执行，而await之后的代码会在等待的异步操作完成后才会继续执行。
[随笔一记]事件循环——async和await
Tian_randai的博客
11-04 878
但async内部遇到await的时候，只有当await右边跟随的代码执行完毕的时候，才会执行后面的代码，此时后面的代码也可以算作内部的微任务。值得注意的是，promise内部遇到resolve（）和reject（）调用的时候，会继续执行后面的代码，遇到了await 先执行右边的代码才会执行后面的代码。async和await也属于异步任务中的微任务。首先执行同步任务 script start。然后执行微任务 async1 start。最后执行宏任务 setTimeout。所以 接着是 async2。
遇到await关键词之后后续代码还会执行吗！
weixin_60838100的博客
09-14 5209
解释器看到该函数被声明为异步,这意味着它将始终返回一个promise. 当遇到await关键字时,它会暂停该函数的进一步执行,直到正在等待的promise被解决 才会去向下执行. await的阻塞方式并不是阻塞同步代码所在的主线程，await其实是阻塞的当前异步函数的异步线程。 虽然await会阻塞async异步函数，但是并没有阻塞同步代码的主线程，同步和异步之间仍然相互不阻塞。 虽然await阻塞异步函数向后执行，看起来像是同步的，但是它本质还是异步的，我们同样可以并行执行其他的不关联的异步操作，而同
被说一知半解，await不懂你别乱用
热门推荐
06-05 2万+
被说一知半解？await不懂你别乱用！
await后面的所有类型代码直接扔到微任务队列中，稍后执行
彤先森的博客
07-15 739
await后面的所有类型代码直接扔到微任务队列中，稍后执行
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 363
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
promise和async await详解
07-27
Promise和async/await都是用于处理JavaScript中的异步操作的工具。它们可以帮助我们更简洁地编写异步代码，并使其更易于阅读和维护。 Promise是一种表示异步操作的对象。它可以有三种状态：Pending（进行中）、Fulfilled（已完成）和Rejected（已拒绝）。当一个Promise对象的状态改变时，它会调用相应的回调函数。 我们可以使用Promise来处理异步操作。通过调用Promise的构造函数并传入一个执行器函数，我们可以创建一个新的Promise对象。执行器函数接受两个参数：resolve和reject。当异步操作成功时，我们可以调用resolve函数将Promise的状态设置为Fulfilled，并传递一个值作为结果。当异步操作失败时，我们可以调用reject函数将Promise的状态设置为Rejected，并传递一个错误对象。 我们可以使用Promise的then方法来处理已完成状态的Promise。then方法接受两个回调函数作为参数：第一个回调函数在Promise成功时被调用，第二个回调函数在Promise失败时被调用。 同时，我们可以使用Promise的catch方法来处理已拒绝状态的Promise。catch方法接受一个回调函数作为参数，该回调函数在Promise被拒绝时被调用。 async/await是基于Promise的语法糖，使异步代码更像同步代码。async函数是一个返回Promise对象的函数，其中使用了await关键字来暂停函数的执行，直到Promise解决（Fulfilled）或拒绝（Rejected）。 在使用async/await时，我们可以使用try/catch语句来捕获Promise中的错误。在try块中，我们可以使用await关键字来等待一个Promise的解决或拒绝。如果Promise被解决，则await表达式将返回解决的值；如果Promise被拒绝，则抛出一个错误对象，可以使用catch块捕获该错误。 总结一下，Promise是一种用于处理异步操作的对象，它有三种状态：进行中、已完成和已拒绝。我们可以使用Promise的then和catch方法来处理已完成和已拒绝状态的Promise。而async/await是基于Promise的语法糖，使异步代码更像同步代码。通过使用async函数和await关键字，我们可以以更简洁的方式编写异步代码，并使用try/catch语句来处理错误。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值