ES6中的Promise、async、await，超详细讲解！

已于 2024-09-01 19:34:01 修改
阅读量2.5k 收藏 68
点赞数 80
分类专栏： javascript深入研究 vue2/3 从基础到起飞 前端工程搭建 文章标签： 前端 javascript ecmascript vue.js es6 ai
于 2024-08-06 08:50:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2301_78542842/article/details/140908279
版权

Promise是es6引入的异步编程新解决方案，Promise实例和原型上有reject、resolve、all、then、catch、finally等多个方法，语法上promise就是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果，本篇文章主要介绍了ES6中的Promise对象与async和await方法，创作不易，如果能帮助到带大家，欢迎收藏+关注 哦 💕

🌈🌈文章目录

Promise

promise状态

Promise.prototype.then

Promise.prototype.catch

Promise.prototype.finally

执行次序

示例1

示例2

链式调用

链式传值

catch对调用链的影响

catch处在最后

catch处在中间

async & await

async

await

Promise

promise状态

Promise总是处于以下三种状态之一：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
ES6中Promise、async和await面试题整理
共同学习，共同成长
08-09 1369
promise是每个前端人必须会接触到的一个知识点,下面这篇文章主要给大家整理了一下关于ES6中Promise、async和await面试题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
Promise的ES5和ES6、async_await的区别，以及用法详解
nihaishilaile的博客
11-29 2649
写法不同 1. **ES5正常写法** getAjax(url,(res)=>{}) 2. **Promise** get(url).then((res)=>{}) 3. **async_await** (async ()=>{ let res = await get(url) })() **总结： ES5写法和promise写法，主要区别在写法的...
终于理清楚了Promise以及async和await
KAMHUNCHAN的博客
02-17 5035
promise理解： 1，是js异步编程的新的解决方案 2，是一个构造函数 3，用来封装一个异步操作，并可以获得其结果 promise三个状态： 1，pendding 未确定 2，resolved 成功 3，rejected 失败 注：状态只能改变一次，成功数据称为value，失败称为reason promise的基本使用 为什么要用Promise： 1.指定回调函数的方式灵活，可以在异步任务前指定也可以在异步任务后指定，而以前指定回调函数必须在异步任务开始前指定。 2.支持链式调用，可以解决
详解ES6的async和await关键字
ldjgood的博客
03-23 2380
一文带你深入了解ES6的async和await关键字
ES6入门---第三单元 模块三：async、await
最新发布
专注大前端
05-04 749
async function fn(){  //表示异步：这个函数里面有异步任务     let result = await  xxx    //表示后面结果需要等待      } 读取文件里数据实例： const fs = require('fs'); //简单封装 fs封装成一个promise const readFile = function (fileName){ re...
ES6中Promise、async、await面试题
ThisEqualThis的博客
02-20 1101
学习过程中遇到的一些基础的Promise、async、await面试题整理。
ES6异步处理方式： Promise / async await
Creabine的博客
04-10 1829
参考资料： - JS Promise API - ES6 Async/Await 完爆Promise的6个原因 Promise js的异步处理，一直是使用callback的，但当我们要连续执行多个异步的时候，就会导致callback层层嵌套，很不友好。所以在ES6中，加入了Promise来帮助处理异步 api Promise.resolve() 　　 执行成功 Prom...
Promise，Async，await简介
dianwangsa3895的博客
06-11 221
Promise 对象 转载：http://wiki.jikexueyuan.com/project/es6/promise.html 基本用法 ES6 原生提供了 Promise 对象。所谓 Promise 对象，就是代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。 有了 Promise 对象，就可以将异步操作以同步操作的流...
【11】ES6：async/await
weixin_45559449的博客
12-28 1712
最后，foo 函数返回一个 resolved 状态的 Promise 对象，该对象的值为’完成’。async/await 是一种基于生成器函数（Generator）和 promise 的语法糖，通过在函数前面加上 async 关键字，将函数转换为返回 promise 对象的异步函数，并使用 await 关键字等待异步操作的结果。await 只能在 async 函数内部使用，它会暂停 async 函数的执行，等待 Promise 对象的状态改变，然后再继续执行 async 函数。
ES6 Promise
LavanSum的博客
12-14 1848
在JavaScript的世界中，所有代码都是单线程执行的。 由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：异步操作就是在将来的某个时间点触发一个函数调用。 Promise对象定义： var promise = new Promise(function(resolve, reject){ //执行代码 bus...
ES6中的Promise
weixin_30652897的博客
04-23 130
ES6中的Promise JavaScript本身是单线程语言，这在Node.js学习中已经反复强调过，因为单线程，就需要在程序进行IO操作时做“异步执行”，比如最典型的网络操作——ajax的使用。 在ajax请求网络时，就是在异步执行这个过程，等到异步工作执行完成，通过事先注册好的回调函数，异步事件完成立即触发回调函数，将回调函数拉入到同步执行中。 可见，异步操作会在将来的某个时间点触发一个事件...
JS基于ES6新特性async await进行异步处理操作示例
10-17
ES6的`async/await`是JavaScript中处理异步操作的一种新方法，它极大地改进了Promise链式调用的方式，让异步代码看起来更接近同步代码的结构，从而提高了代码的可读性和可维护性。在本文中，我们将深入探讨`async/...
详解ES6之async+await 同步/异步方案
08-29
async+await是ES6中引入的异步编程解决方案，旨在解决异步编程中的回调地狱问题。下面我们将详细介绍async+await的工作原理和使用方法。 异步编程的几个场景 异步编程是JavaScript编程的重大问题之一。关于异步...
ES6中的promise
lemon_shinning的博客
06-15 165
Promise是异步编程的一种解决方案，其实是一个构造函数，它的原型上有then和catch等方法。JS是单线程的语言，所以很多操作都是异步操作，而异步操作多由回调函数完成，这里边就会引出一个现象“回调地狱”即回调函数中有回调函数，这种现象会导致代码的可读性降低，为了解决这个问题我们选择使用Promise。防止出现回调地狱，提高代码的可读性，像同步操作那样去执行异步操作。 一个promise对象就代表一个异步操作，通过状态去管理异步操作。 打印结果...
Promise使用详解2（ES6中的Promise）
泥猴桃的博客
06-09 304
2015年6月， ES2015（即 ECMAScript 6、ES6） 正式发布。其中 Promise 被列为正式规范，成为 ES6 中最重要的特性之一。 1，then()方法 简单来讲，then 方法就是把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。 而 Promise 的优势就在于这个链式调用。我们可以在 then 方法中继续写 Promise 对象并返回，...
Promise、Async/Await 详解
m0_61663332的博客
08-03 5058
Promise、Async/Await 详解，Promise的参数resolve和reject、回调函数.then 和.catch和方法 .all() 和 .race()的使用。以及语法糖async/await的使用方法。
ES6 Async/Await函数
idomyway的博客
12-11 791
前言     async-await是promise和generator的语法糖。只是为了让我们书写代码时更加流畅，当然也增强了代码的可读性。简单来说：async-await 是建立在 promise机制之上的，并不能取代其地位。 基本语法 let awaitPromise = new Promise((resolve,reject)=>{ … r...
es6---Promise
muzidigbig的博客
10-20 7005
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大 回调函数 回调地狱 Promise.then()参数 Promise.all() Promise.allSettled() Promise.race() Promise.any() Promise.withPesolvers() Promise链中断方法 async/await Promise 高级用途的技巧 setTimeout、Promise、Async/Await 的区别
async/awai组合actions
09-05
async/await是JavaScript中用于处理异步操作的语法糖，可以使异步代码看起来更像同步代码，提高代码的可读性和简洁性。 在使用Redux等状态管理库中，我们经常需要处理异步的actions，例如发送网络请求或者调用异步函数。使用async/await可以让这些异步操作更加便捷。 组合actions是指在Redux中将多个actions组合在一起进行处理。在使用async/await时，可以通过组合多个带有异步操作的actions来实现更复杂的异步处理。下面是一个示例代码： ``` // action1.js export const action1 = () => { return async (dispatch) => { dispatch({ type: 'ACTION1_START' }); try { // 异步操作，例如发送网络请求 const response = await fetch('http://api.example.com/data'); const data = await response.json(); dispatch({ type: 'ACTION1_SUCCESS', payload: data }); } catch (error) { dispatch({ type: 'ACTION1_FAILURE', payload: error }); } }; }; // action2.js export const action2 = () => { return async (dispatch) => { dispatch({ type: 'ACTION2_START' }); try { // 异步操作，例如调用异步函数 const result = await asyncFunction(); dispatch({ type: 'ACTION2_SUCCESS', payload: result }); } catch (error) { dispatch({ type: 'ACTION2_FAILURE', payload: error }); } }; }; // 组合actions export const combinedActions = () => { return async (dispatch) => { dispatch(action1()); dispatch(action2()); }; }; ``` 在上述代码中，action1和action2都是带有异步操作的actions，使用async/await来处理这些异步操作。在combinedActions中，可以通过dispatch来同时触发这两个异步actions，实现异步操作的组合。 通过async/await组合actions，我们可以更方便地处理异步操作，并且可以在其中进行错误处理，提高代码的健壮性和可维护性。同时，使用组合actions的方式也符合Redux的设计原则，可以更好地管理和组织异步操作。
评论 68
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

码喽的自我修养

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

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

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

打赏作者

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

抵扣说明：

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

余额充值