关于Promise.all()的理解
本篇笔记是抄的别人的,目的只是为了日后有用到时有个参考,原文地址是https://www.jianshu.com/p/7e60fc1be1b2
一、Pomise.all的使用
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。
具体代码如下:
let p1 = new Promise((resolve, reject) => {
resolve('成功了')
}) let p2 = new Promise((resolve, reject) => {
resolve('success')
}) let p3 = Promse.reject('失败') Promise.all([p1, p2]).then((result) => {
console.log(result) //['成功了', 'success']
}).catch((error) => {
console.log(error)
}) Promise.all([p1,p3,p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 失败了,打出 '失败'
})
Promse.all在处理多个异步处理时非常有用,比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示,在此之前只显示loading图标。
代码模拟:
let wake = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`${time / 1000}秒后醒来`)
}, time)
})
} let p1 = wake(3000)
let p2 = wake(2000) Promise.all([p1, p2]).then((result) => {
console.log(result) // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
console.log(error)
})
二、Promise.race的使用
顾名思义,Promse.race就是赛跑的意思,意思就是说,Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
},1000)
}) let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('failed')
}, 500)
}) Promise.race([p1, p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 打开的是 'failed'
})
原理是挺简单的,但是在正常的项目用到的场景不多,一般前端的逻辑不会太复杂,有人性的后台一般会把接口设计的很便捷,即是为了体现自己的技术,也是为了防止前端同事的吐槽,当然关键还是为了体验,但是如果遇到个渣渣后台就不好说了,本人在写这边文章前一个月的时间就正好遇到了这么个给力的后台同事,今天正好有看了遍这个Promise,所以特别写下来以便以后参考
关于Promise.all()的理解的更多相关文章
- 阿里前端测试题--关于ES6中Promise函数的理解与应用
今天做了阿里前端的笔试题目,原题目是这样的 //实现mergePromise函数,把传进去的数组顺序先后执行,//并且把返回的数据先后放到数组data中 const timeout = ms => ...
- 关于Promise 简单使用理解
在学一个新的知识的时候,我的总结是首先要具备相关的基础知识,其次就是可以静下心来能看进去去理解,看一两遍不懂,就看四五遍,甚至六七遍,每一遍都认真努力理解,总会学会的. Promise是一个构造函数, ...
- ES6中Promise对象个人理解
Promise是ES6原生提供的一个用来传递异步消息的对象.它减少了传统ajax金字塔回调,可以将异步操作以同步操作的流程表达出来使得代码维护和可读性方面好很多. Promise的状态: 既然是用来传 ...
- 关于promise自己的理解
参考文档:http://es6.ruanyifeng.com/#docs/promise#Promise-%E7%9A%84%E5%90%AB%E4%B9%89 ES6 规定,Promise对象是一个 ...
- Promise对象深入理解
目录 基本用法 返回另一个 Promise 实例 Promise.prototypeof.then Promise.prototype.catch Promise.prototype.finally ...
- promise到底怎么理解
Promise的含义promise是异步编程的一种解决方法.所谓promise,简单说是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,从语法上说,promise是一个对象,从 ...
- 结合promise对原生fetch的两个then用法理解
前言:该问题是由于看到fetch的then方法的使用,产生的疑问,在深入了解并记录对promise的个人理解 首先看一下fetch请求使用案例: 案例效果:点击页面按钮,请求当前目录下的arr.txt ...
- 关于ES6的Promise的使用深入理解
ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...
- 理解Promise.all,Promise.all与Promise.race的区别,如何让Promise.all在rejected失败后依然返回resolved成功结果
壹 ❀ 引 我在 es6入门4--promise详解 这篇文章中有详细介绍Promise对象的用法,文章主题更偏向于对于Promise概念的理解与各方法基本使用介绍:而世上一个比较有趣的问题就是,即 ...
- 细嗅Promise
读完这篇文章,预计会消耗你 40 分钟的时间. Ajax 出现的时候,刮来了一阵异步之风,现在 Nodejs 火爆,又一阵异步狂风刮了过来.需求是越来越苛刻,用户对性能的要求也是越来越高,随之而来的是 ...
随机推荐
- 手动安装Mysql数据库,适合重装系统和绿色安装。
依次输入命令: d:cd D:\MySQL Server 5.6\bin 根据自己的目录设置 mysqld --install mysql4001 --defaults-file="D:\m ...
- 单一接口优化过程全记录(主要涉及Redis)
接口优化过程记录 问题背景 某个接口耗时长(247ms),但里面逻辑不算复杂,只进行了简单的对象引用以及操作了多次Redis 步骤1:链路追踪,确定业务耗时点 接口里通过链路追踪以及日志查询发现主要是 ...
- JavaScript入门⑩-ES6归纳总结
JavaScript入门系列目录 JavaScript入门①-基础知识筑基 JavaScript入门②-函数(1)基础{浅出} JavaScript入门③-函数(2)原理{深入}执行上下文 JavaS ...
- python虚拟环境和venv的使用
目录 1.环境与虚拟环境 2.查看帮助 3.--system-site-package 命令 4.创建虚拟环境 5.激活/关闭虚拟环境 6.保存和复制虚拟环境 7.改变虚拟环境所指向的真实python ...
- python之yaml文件读取封装
import os import yaml from yamlinclude import YamlIncludeConstructor YamlIncludeConstructor.add_to_l ...
- Apache Dubbo 官方正式发布 Spring 6 & Spring Boot 3 支持
Dubbo 简介 Apache Dubbo 是一款 RPC 服务开发框架,用于解决微服务架构下的服务治理与通信问题,官方提供了 Java.Golang 等多语言 SDK 实现.使用 Dubbo 开发的 ...
- vue3 递归组件 树形组件
递归组件 第一种方式,直接自己调用自己 Tree.vue <template> <div class="tree"> <div v-for=" ...
- 对Asp.net WebApi中异步(async+await)接口实际使用及相关思考(示例给出了get,post,提交文件,异步接口等实践).
[很多初学者的疑问] 为何作为web api这样的天然的并发应用,还需要在controller的action上声明使用async这些呢? <参考解答> 在 web 服务器上,.NET Fr ...
- 有意思,小程序还可以一键生成App!
小程序≠微信小程序 说到小程序,大部分同学的第一反应,可能是微信小程序.支付宝小程序,确实,小程序的概念深入人心,并且已经被约定俗成的绑定到某些互联网公司的 APP 上. 但是,"小程序&q ...
- python之路28 网络编程基础之OSI七层协议模型
OSI七层协议 """ 七层模型,亦称OSI(Open System Interconnection).参考模型是国际标准化组织(ISO)制定的一个用于计算机或通信系统间 ...