【JS Promise, Promise.all 与 async/await用法详解】

目录

    • Promise
    • Promise基本使用
    • Promise可进行连续回调
    • Promise回调可接受入参
      • 1.工作原理
    • async/await
    • 总结
      • 参考文档:

异步

 let a = 0setTimeout(() => {a = 1}, 1000)console.log(a) // 0

此时这个延迟就成为异步执行的了,a值还没有变1就被使用输出,我们只能得到0。

Promise

有时候我们不得不进行异步操作,比如从后台请求数据,我们需要时间,等待它得到数据后再使用。

Promise基本使用

new Promise()内接收一个函数,入参为resolve, reject

Promise内的函数将可以执行任意时长,执行到调用resolve()reject(),我们此处把它放在延迟1s后执行,此时a已经被赋值为1,因此就可以得到被赋值后的a。

**resolve()**进入.then也就是执行成功回调,**reject()**进入.catch也就是手动执行错误进入捕获异常,reject()用的较少。

let a = 0new Promise((resolve, reject) => {setTimeout(() => {a = 1resolve()}, 1000)}).then(() => {console.log(a) //1}).catch(() => {}
)

Promise可进行连续回调

  1. 第一种方式,回调函数中接受返回一个新的Promise进行下一步回调。

  2. 第二种方式,Promise.resolve(res)在res为普通数据时等同于new Promise并且resolve(res)

  3. 第三种也是最常用的,再异步回调中直接返回普通数据也可当作接受了一个新的Promise进行下一步回调

let a = 0new Promise((resolve, reject) => {setTimeout(() => {a = 1resolve(a)}, 1000)}).then((res) => {return new Promise((resolve, reject) => {resolve(res)})//等同于//return Promise.resolve(res)//等同于//return res}).then((res) => {console.log(res) //1}).catch(() => {})

Promise回调可接受入参

  1. .then中的回调函数可以存在入参,入参为**resolve()**手动传入,此处res便是传入的a值。
  2. .catchreject()的关系与上面两者同理,只不过变成了手动捕捉错误时的回调。
 let a = 0new Promise((resolve, reject) => {setTimeout(() => {a = 1resolve(a)}, 1000)}).then((res) => {console.log(res) //1}).catch(() => {})

Promise.all(promises) ,能够一次并行处理多个 promise,并且只返回一个 promise 实例, 那个输入的所有 promiseresolve 回调的结果是一个数组。

1.工作原理

Promise.all() 是一个内置的辅助函数,接受一组 promise(或者一个可迭代的对象),并返回一个promise :
ini复制代码const allPromise = Promise.all([promise1, promise2, …]);

可以使用 then 方法提取第一个 promise 的值:

allPromise.then((values) => {values; // [valueOfPromise1, valueOfPromise2, ...]
});

也可以使用 async/await 语法:

const values = await allPromise;
console.log(values); // [valueOfPromise1, valueOfPromise2, ...]

Promise.all() 返回的 promise 被解析或拒绝的方式。
如果 allPromise 都被成功解析,那么 allPromise 将使用一个包含各个 promise 已执行完成后的值的数组作为结果。数组中 promise 的顺序是很重要的——将按照这个顺序得到已实现的值。
在这里插入图片描述
但是如果至少有一个 promise 被 rejected ,那么 allPromise 会以同样的原因立即 rejected (不等待其他 promise 的执行)。
在这里插入图片描述

如果所有的 promise 被 rejected ,等待所有的promise 执行完成,但只会返回最先被rejected 的promise 的 reject 原因。
在这里插入图片描述
具体使用可以参考: https://juejin.cn/post/7003713678419705870

Promise.all() 的这种行为被称为快速失败,如果 promise 数组中至少有一个 promise 被 rejected ,那么返回的 promise 也被拒绝。如果promise 数组中所有的都被 rejected ,那么返回的promise 被拒绝的原因是先rejected的那一个。

Promise.all() 是并行执行异步操作并获取所有 resolve 值的最佳方法,非常适合需要同时获取异步操作结果来进行下一步运算的场合

async/await

Promise是用来解决回调地域问题,因此es7出现了async/await,是Promise的语法糖,等同于Promise的链式调用+ Exception处理。

async/await有一个限制就是必须在函数中使用,因此我们将代码包进一个函数,并在函数前加上async这样我们便可以在函数中使用await关键字

const test = async () => {let a = 0...}test()

await用在哪里呢?用在.then回调前的Promise

await后面跟着Promise,而它的返回值便是回调时resolve()传来的值,代替了回调函数,看起来代码一下子就清晰很多了。

const test = async () => {let a = 0const res = await new Promise((resolve, reject) => {setTimeout(() => {a = 1resolve(a)}, 1000)})console.log(res) //1}test()

总结

  • Promise 是一种更底层的异步编程模型,而 async/await 则是基于 Promise 的语法糖,使异步代码更加清晰易读。

  • 在实际使用中,async/await 更容易理解和维护,但它们本质上仍然依赖于 Promise。

参考文档:

  • https://juejin.cn/post/7078882164032421924
  • https://juejin.cn/post/7003713678419705870

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/206206.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

element table滚动到底部加载数据(vue3)

效果图 使用插件el-table-infinite-scroll npm install --save el-table-infinite-scroll局部导入 <template><div class"projectTableClass"><el-table v-el-table-infinite-scroll"load"></el-table></div> </temp…

C#,《小白学程序》第二十七课:大数四则运算之“运算符重载”的算法及源程序

1 文本格式 using System; using System.Text; using System.Collections; using System.Collections.Generic; /// <summary> /// 大数的四则&#xff08;加减乘除&#xff09;运算 /// 及其运算符重载&#xff08;取余数&#xff09; /// </summary> public cl…

海外热门:香港服务器和美国服务器的成本较量

​  提到 2023 年海外热门服务器&#xff0c;在整个 IDC 站长圈中&#xff0c;要数香港服务器和美国服务器的关注度一直居高不下。其实也正常&#xff0c;毕竟这两种海外服务器相较成熟。不过&#xff0c;在实际使用中&#xff0c;两者也会被拿来对比&#xff0c;最显而易见的…

WordPress安装AWS插件实现文本转语音功能

适用于 WordPress 的 AWS 插件示例演示了内容创建者如何轻松地为所有书面内容添加文本转语音功能。随着语音搜索的不断增加&#xff0c;以音频格式提供更多网站内容变得至关重要。通过添加语音功能&#xff0c;网站访客可以通过在线音频播放器和播客应用程序等新渠道使用您的内…

Dubbo3使用Zookeeper作为注册中心的方案讨论!详解DubboAdmin与PrettyZoo来监控服务的优劣!

文章目录 一&#xff1a;Dubbo注册中心的基本使用 二&#xff1a;Zookeeper注册中心的使用 1&#xff1a;依赖引入 2&#xff1a;实际开发 三&#xff1a;Zookeeper作为注册中心的使用展示 1&#xff1a;启动注册Zookeeper服务 2&#xff1a;引入注册中心 (一)&#xf…

【开源】基于JAVA的天然气工程运维系统

项目编号&#xff1a; S 022 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S022&#xff0c;文末获取源码。} 项目编号&#xff1a;S022&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统角色分类2.2 核心功能2.2.1 流程…

ESP32-Web-Server编程- 使用SSE 实时更新设备信息

ESP32-Web-Server编程- 使用SSE 实时更新设备信息 概述 如前所述&#xff0c;传统 HTTP 通信协议基于 Request-Apply&#xff08;请求-响应&#xff09;机制&#xff0c;浏览器&#xff08;客户端&#xff09;只能单向地向服务器发起请求&#xff0c;服务器无法主动向浏览器推…

2023亚太杯数学建模A题思路分析 - 采果机器人的图像识别技术

1 赛题 问题A 采果机器人的图像识别技术 中国是世界上最大的苹果生产国&#xff0c;年产量约为3500万吨。与此同时&#xff0c;中国也是世 界上最大的苹果出口国&#xff0c;全球每两个苹果中就有一个&#xff0c;全球超过六分之一的苹果出口 自中国。中国提出了一带一路倡议…

智安网络|发现未知风险,探索渗透测试的奥秘与技巧

在当今信息时代&#xff0c;网络安全已成为组织和个人面临的重大挑战。为了保护网络系统的安全&#xff0c;渗透测试成为一种重要的手段。 一、渗透测试的基本原理 渗透测试是通过模拟黑客攻击的方式&#xff0c;对目标系统进行安全评估。其基本原理是模拟真实攻击者的思维和行…

稳定的音频来了 — 使用人工智能创作音乐(for free)

今天&#xff0c;以稳定扩散&#xff08;Stable Diffusion&#xff09;和StableLM等开源AI工具和模型而闻名的Stability AI公司推出了其首个音乐和声音生成AI产品——StableAudio。音乐产业以其难以打入而闻名。即使您拥有才华和动力&#xff0c;您仍然需要创作和制作音乐所需的…

ESP32单片机案例

工具&#xff1a;VScode PlatformIO IDE 注&#xff1a;B站视频学习笔记。 1、继电器 1&#xff09;硬件电路 2&#xff09;程序 #include <Arduino.h> #define RELAY_PIN 15//初始化定时器 hw_timer_t *timer NULL;void timer_interrupt(){digitalWrite(RELAY_PIN…

C++设计模式——原型 (克隆)模式

一、什么是原型模式 Prototype模式说简单点&#xff0c;就是提供了一个clone, 通过已存在对象进行新对象创建。clone&#xff08;&#xff09;实现和具体的实现语言相关&#xff0c;在C中我们通过拷贝构造函数实现。 那为啥要写clone的接口来实现这个目的呢&#xff1f;直接使…

如何在本地安装部署WinSCP,并实现公网远程本地服务器

可视化文件编辑与SSH传输神器WinSCP如何公网远程本地服务器 文章目录 可视化文件编辑与SSH传输神器WinSCP如何公网远程本地服务器1. 简介2. 软件下载安装&#xff1a;3. SSH链接服务器4. WinSCP使用公网TCP地址链接本地服务器5. WinSCP使用固定公网TCP地址访问服务器 1. 简介 …

【刷题笔记】分糖果||数组||暴力通过||符合思维方式||多案例分析

分发糖果 文章目录 分发糖果1 题目描述2 题目分析2.1 寻找波峰波谷2.2 从波底往波峰攀爬&#xff01;2.2 计算糖果 3 代码附录1 1 题目描述 https://leetcode.cn/problems/candy/ n 个孩子站成一排。给你一个整数数组 ratings 表示每个孩子的评分。 你需要按照以下要求&…

猜-MISC-bugku-解题步骤

——CTF解题专栏—— 题目信息&#xff1a; 题目&#xff1a;猜 作者&#xff1a;harry 提示&#xff1a; 解题附件&#xff1a;flag格式key{图中人物名字全拼} 解题思路&#xff1a; 这......头都没有&#xff0c;让我guess&#xff1f;&#xff1f;&#xff1f;详细信息看…

Go 从编译到执行

一、Go运行编译简介 Go语言&#xff08;也称为Golang&#xff09;自从2009年由Google发布以来&#xff0c;已成为现代软件开发中不可或缺的一部分。设计者Rob Pike, Ken Thompson和Robert Griesemer致力于解决多核处理器、网络系统和大型代码库所引发的现实世界编程问题。我们…

小程序禁止二次转发分享私密消息动态消息

第一种用法&#xff1a;私密消息 私密消息&#xff1a;运营人员分享小程序到个人或群之后&#xff0c;该消息只能在被分享者或被分享群内打开&#xff0c;不可以二次转发。 用途&#xff1a;主要用于不希望目标客群外的人员看到的分享信息&#xff0c;比如带有较高金额活动的…

ffmpeg下载与配置环境变量

FFmpeg 是一个强大的多媒体框架&#xff0c;可以让用户处理和操纵音频和视频文件。具有易于使用的界面&#xff0c;用户可以在 Windows、Mac 或 Linux Ubuntu 系统上下载 FFmpeg 并将其提取到文件夹中。然后&#xff0c;该软件可以加入 PATH 环境变量中就可以快捷的使用软件了.…

k8s环境排查nginx转发nacos请求失败问题

一、问题背景 k8s部署两个服务,一个nginx&#xff0c;一个nacos, 服务信息如下(nacos有两个端口): 服务 serviceNameservice类型porttargetPort nodePortnginxmonitor-cp-nginxNodePort808031082nacosmonitor-cp-nacosClusterIP88488848-98489848- ng的default.conf配置文件…

轻型载重汽车转向前桥总成系统毕业设计机械设计

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;前桥 获取完整说明报告工程源文件 绪论 1.1 轻型载重汽车转向桥的设计意义 汽车是现代交通工具中用得最多&#xff0c;最普遍&#xff0c;也是最方便的交通运输工具。汽车转向系是汽车上的一个重要系统,它是汽车转向运动…