await和then的区别详解

最新推荐文章于 2024-03-02 23:24:33 发布
最新推荐文章于 2024-03-02 23:24:33 发布
阅读量1.2w 收藏 33
点赞数 22
分类专栏： javascript 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44606064/article/details/113796423
版权

Async/Await与Promise最大区别在于：await b()会暂停所在的async函数的执行；而Promise.then(b)将b函数加入回调链中之后，会继续执行当前函数。对于堆栈来说，这个不同点非常关键。
下面是promise封装的请求函数
在这里插入图片描述
下面是用await和then的方式进行数据请求。
在这里插入图片描述

await的方式：

执行第40行代码之后会暂停40行之后的代码执行，直到请求的数据返回才开始执行后面的代码。所以后面41行的数据是请求回来的数据。

then的方式

发送请求之后会将then中的内容放入堆栈，then之后的代码正常顺序执行，所以第51行执行的时候还没有请求到数据，就会输出undefine。当请求的数据回来时，开始执行then中的代码段（46-48行代码）。

个人理解，如有错误欢迎批评指正！

编程小飞
关注
  • 22
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
await-top:允许顶层等待
05-13
等待上 await-top是一个使您可以使用顶级await的库。 不相信我吗？ 举个例子： // test.js require = require ( './index' ) console . log ( 'Promise: %O' , require ( './test-2' , module ) . then ( ( x ) => { console . log ( x ) } ) ) // test-2.js let fs = require ( 'fs' ) console . log ( await Promise . resolve ( 'Hello, World! (await from inside module)' ) ) module . exports = 'Hello, World! (exports)' console . l
ES7之Async/await的使用详解
10-17
主要介绍了ES7之Async/await的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
async/await和then函数的执行顺序
weixin_41425956的博客
04-26 7934
首先说结论： async 用来指定方法为异步方法（区别于同步方法），即只有async修饰的函数中才能出现await阻塞操作，遇到阻塞是先让CPU先执行函数外的操作，之后再回函数内部执行函数内接下来的代码。而不像同步方法那样傻傻的等待，浪费CPU资源 await阻塞，后面放异步任务，当其执行完毕后，阻塞该函数的执行，去执行函数外的代码 例如：const...
【全面拥抱await，放弃.then】
最新发布
qq_49712611的博客
03-02 795
全面拥抱await，放弃.then
Js中async/await的执行顺序详解
10-19
随着async/await正式纳入ES7标准，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。下面这篇文章主要给大家介绍了关于Js中async/await执行顺序的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
async和await用法介绍
01-13
async和await用法
异步 await 和.then的区别
weixin_44727080的博客
12-18 4802
await 就是 等待方法执行完 返回结果 这时候只用接收 就好了 .then 也是等待方法执行完 只是 await 返回的直接是数据 .then返回的是个方法 方法里面带有 数据
关于 async 函数的理解
weixin_33843947的博客
12-11 178
前言 写这一篇文章的目的在于看到这篇文章觉得挺有意思，所以写下这个已表看法。 这个是原文 开始进坑 所谓的争论起源于一道面试题 async function async1() { console.log('async1 start') await async2() console.log('async1 end') } async function async2() { co...
async函数、await函数、promise、then四者的关系
前端知识库
05-22 3305
async和await要搭配Promise使用, 它进一步极大的改进了Promise的写法 1.特点 await后面接一个会return new promise的函数并执行它 await只能放在async函数里 2.案例 function 摇色子(){ return new Promise((resolve, reject)=>{ let sino = parseInt(Math.random() * 6 +1) setTimeout(()=>{
谈谈Promise的then链与async/await方法的异同之处
hongweilin2021的博客
10-30 1458
推出Promise及其then链是为了解决多层次的回调函数问题的，而async/await函数是为了简化多个then链情况而出现的。
async await使用规范记录
luobo2345的博客
05-15 726
await和then不要一起使用，await可以通过try catch捕获返回信息。
ES6 async、await的基本使用方法示例
11-20
本文实例讲述了ES6 async、await的基本使用方法。分享给大家供大家参考，具体如下： async是异步编程的最新标准，我们来看看async如何使用 1.async的简单使用 async function fn () { return 'abc' } console.log(fn()); // Promise { 'abc' } fn().then(res => { console.log(res); // "abc" }) async作为关键字放在函数前面，让同步的函数成为异步函数，不关函数里返回什么，
关于async和await的一些误区实例详解
09-04
主要介绍了关于async和await的一些误区实例详解,有助于更加深入的理解C#程序设计,需要的朋友可以参考下
详解C#中的Async和Await用法
09-03
主要介绍了C#中的Async和Await用法,包括在C#5.0下一些新特性的影响,需要的朋友可以参考下
浅谈C#中的Async和Await的用法详解
08-26
主要介绍了浅谈C#中的Async和Await的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序解决多个视频同时播放
qq_44606064的博客
02-22 2586
小程序多个视频同时播放
ES6中的reduce函数详解
qq_44606064的博客
11-07 1982
ES6中的reduce函数详解
js作用域与执行上下文
qq_44606064的博客
05-08 297
js作用域与执行上下文
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语句来处理错误。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程小飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值