Promise，await的使用

最新推荐文章于 2025-01-19 22:16:53 发布
原创 最新推荐文章于 2025-01-19 22:16:53 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文探讨了如何正确使用Promise进行异步操作，特别是在控制循环中并发请求的顺序和回调.then的执行逻辑。作者通过实例说明了Promise外壳和resolve/reject的作用，并揭示了请求拦截器在顺序控制中的应用。

上面是控制台输出的信息，前者是输出的Promise，后者是Promise.then。

Promise有promiseresult等待返回，promise.then的result应该是已经输出了，所以打印出来是undefined。

  

上方delArr是请求参数的数组，遍历数组发起请求。希望在循环发起的请求结束之后执行后续操作，保证执行的顺序，可以使用await。下面是这种操作的打印顺序，先输出两个‘嘻嘻哈哈’下面的对象是请求拦截器中的config，感觉执行顺序是，请求挂起，执行.then，触发请求拦截器发起请求

在这里也写下对promise用法的理解： 外面套一层promise外壳，里面放需要执行的函数，根据执行的情况放resolve和reject的位置，把resolve和reject理解成出口，promise里的函数执行成功，对应的内容从resolve传递出去，失败则从reject传递出去，函数执行的成功还是失败是你自己定义的。后续的then对接resolve出口，拿到resolve出来的内容作为参数，catch则拿到reject传递出来的内容作为参数

DWC__
关注
ES6中的Promise、async、await，超详细讲解！
共同学习，共同成长
08-06 3018
Promise是es6引入的异步编程新解决方案，Promise实例和原型上有reject、resolve、all、then、catch、finally等多个方法，语法上promise就是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果，本篇文章主要介绍了ES6中的Promise对象与async和await方法
Promise\async\await\setTimerout面试题
hole_diss的博客
11-09 788
Pomise, setTimerout相对比较容易，Pomise基于链式调用比较清晰，setTimerout作为宏任务在后期执行async\await出现各类返回值的情况下，情况比较复杂。
Promise与async/await
最新发布
yuren_xia的博客
01-19 1630
Promise和是JavaScript中处理异步操作的两种重要方式。
promise 、async/await 的原理及实现
yiyi_11的博客
12-05 1817
promise 是每个前端人必须会接触到的一个知识点，虽然我们在日常的项目中常常会用到，例如 发起 axios 的请求获取数据，异步加载资源避免页面的阻塞，但是往往我们对其中的原理知之甚少，带着一知半解的疑惑，我们就一起从简入深，慢慢拆解学习一下吧。
JS 异步操作 Promise对象学习笔记
优快云milu的博客
05-29 1114
在学习JS的时候没看es6的部分导致自己写和看别的代码时很吃力，今天遇到了异步的问题，然后有了点理解趁热写下来。 1、JavaScript 异步编程 与之前学过的语言不太相同的是，JS含有异步的概念。浏览器在执行JS代码时有且只有一条主线程，按行顺序执行代码，但是主线程可以发射一个子线程出来辅助做一些其他事情。有的时候我们处理一件事情的时候是有步骤的，步骤二只能在步骤一执行完了才能继续。要是有一个大文件要上传或下载，主线程就会一直卡在上传或下载那个地方，这样页面就因为主线程被占用失去响应。因为主线程可以发射
Vue3数据交互axios
南城余coding的博客
12-22 901
Vue3数据交互axios
Promise - async await的基本用法以及使用陷阱，高效使用技巧
优快云
12-07 4161
基本用法 async关键字用于修饰一个函数，被修饰的函数会变为异步函数 这里的异步函数，并不是指async函数执行是异步的，而是指async函数会返回一个promise对象 async函数返回的promise对象的状态和结果取决于async函数的return值或抛出的异常 若return值为非promise对象，则async函数返回一个成功态的promise对象，其结果为return值 若return值为promise对象，则async函数返回一个新的promise对象，其状态和..
【鸿蒙实战开发】如何处理 Promise await异常
maniujiaoyu的博客
07-26 500
●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我两个小忙：●关注小编，同时可以期待后续文章ing ，不定期分享原创知识。
深入理解 JavaScript 的 Promise 与 async/await
bjzhang75的博客
08-27 1209
在 JavaScript 中，异步操作允许程序在等待某个任务完成时，继续执行其他代码，而不会阻塞主线程。这对于处理如网络请求、文件读写、定时器等耗时任务尤为重要。Promise 是一种用于处理异步操作的对象，它代表一个尚未完成但预计会在未来某个时间点完成的操作。Pending（待定） ：初始状态，操作尚未完成。Fulfilled（已完成） ：操作成功完成。Rejected（已拒绝） ：操作失败。在现代 JavaScript 开发中，异步编程至关重要。
Promise和await结合使用
qq_42931285的博客
11-27 4123
async function async1(){ return new Promise(resolve=>{ resolve(2); }) } async function async2(){ let c = await async1(); let d = new Promise((resolve,reject)=>{ resolve(c); }) console.log("d为多少"); console.log(d); } async2(); 结果如下：
promise用法，及结合async，await详解
小龚的博客
03-19 7651
欢迎点击: 个人官网博客 promise，及结合async，await详解 1.promise基础 promise 异步问题同步化解决方案，很多人说promise解决了回调地狱。我个人认为promise只是顺带解决回调地狱，不是解决回调地狱的最佳方案，因为promise要链式then方法，一旦多起来，又陷入了then地狱。真正解决回调地狱的是async，await,简洁明了(待会下面细讲)。 promise 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、
promise 与 await
qq_36760651的博客
04-21 493
async function async1() { console.log("async1 start"); await async2(); const newPromise6 = new Promise(function(resolve, reject) { resolve(console.log('promise11111')); }).then(() => {cons...
Promise 和 await
u012508127的专栏
06-11 218
Promise Promise 主要接受两个参数(参数都是函数,处理成功和失败的回调) Promise 和 await 结合
js中的promise、async/await 用法，详解async、await 语法糖，js中的宏任务和微任务（保姆级教程二）
热门推荐
zhangfuping123456789的博客
08-16 1万+
js、promise、await、async
promise和async，await的使用
qq_39004626的博客
08-07 1006
需要特别注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。注意：因为async把函数变成了异步的，当里面有await表达式时，会依次的从上往下执行，执行await表达式里面的东西后才会执行排在表达式后面的数据。async，await是promise的语法糖，是基于promise使用。
Promise详解及Async/Await
weixin_44446127的博客
03-27 2687
await后面跟一个Promise对象，它会“等待”这个Promise对象变为fulfilled状态，并返回其结果。更灵活的异步操作组合：Promise支持多个异步操作的组合，比如通过Promise.all()等待所有异步操作完成，或者通过Promise.race()只等待第一个完成的异步操作。更好的错误处理：Promise提供了.catch()方法，用于捕获异步操作过程中发生的错误。Promise是es6中引入的一个新的对象，用于表示一个异步操作的最终完成（或失败）及其结果值。
promise —— async & await
weixin_45076393的博客
01-17 391
promise —— async & awaitPromisePromise实例一async & awaitasync：await： Promise Promise是ES6新出的一个用来处理异步操作的对象。能够让我们更优雅的进行异步调用。 大致结构如下： var promise = new Promise(function(resolve, reject){ // ... 一些异步操作，并且这些异步操作在实例化的时候就执行了，要注意！⚠️通常选择把newPromise对象给包在函数
Promise、Async/Await 详解
m0_61663332的博客
08-03 5414
Promise、Async/Await 详解，Promise的参数resolve和reject、回调函数.then 和.catch和方法 .all() 和 .race()的使用。以及语法糖async/await的使用方法。
Promise和async/await
WY66987的博客
09-06 1613
promise和async\await的区别
vue promise async await使用
01-16
### 如何在 Vue.js 中使用 Promise、`async` 和 `await` #### 使用场景 在现代 Web 开发中，异步操作无处不在。Vue.js 提供了多种方式来处理这些异步逻辑，其中最常见的是通过 Promises 结合 `async`/`await` 来简化代码结构并提高可读性。 #### 实现方法 当涉及到数据获取或其他耗时的任务时，在组件生命周期钩子内定义一个带有 `async` 关键字的方法是一个不错的选择。这允许内部调用被标记为 `await` 的表达式暂停执行直到其解析完毕后再继续[^1]。 对于简单的 HTTP 请求来说，可以利用 Axios 或者 Fetch API 并将其封装在一个返回 promise 的函数里： ```javascript // 定义一个服务类来进行API请求 class ApiService { static async fetchData(url) { try { const response = await fetch(url); if (!response.ok) throw new Error('Network response was not ok'); let data = await response.json(); return data; } catch (error) { console.error(`Error fetching data from ${url}`, error.message); throw error; // 抛出错误以便外部捕获 } } } ``` 接着可以在任何地方轻松地调用这个静态方法，并且由于它是异步的，所以可以直接使用 `await` 调用来等待结果: ```vue <template> <div v-if="loading">Loading...</div> <ul v-else> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> </template> <script setup> import { ref, onMounted } from 'vue'; import { fetchData } from './services/apiService'; const loading = ref(true); const items = ref([]); onMounted(async () => { try { items.value = await fetchData('/api/items'); } finally { loading.value = false; } }); </script> ``` 上述示例展示了如何结合 Composition API (`setup`) 函数中的响应式变量以及组合式函数（如 `ref`, `onMounted`），从而实现更简洁明了的数据流控制[^4]。 值得注意的是，虽然这里展示的例子相对基础，但在实际项目开发过程中应当考虑更多因素，比如状态管理库 Vuex/Vuex Store 的集成、全局错误处理器等高级特性[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值