JavaScript promise的使用和原理分析

目录
  • 一、为什么一个promise可以调用多个.then方法
  • 二、什么是Promise.resolve()
  • 三、Promise.all缺陷和Promise.allSettled
  • 四、Promise.race() 使用

一、为什么一个promise可以调用多个.then方法

如下面的：

const promise = new Promise((resolve, reject) => {
  resolve("hahaha")
})
// 1.同一个Promise可以被多次调用then方法
// 当我们的resolve方法被回调时, 所有的then方法传入的回调函数都会被调用
promise.then(res => {
  console.log("res1:", res)    //hahaha
})
promise.then(res => {
  console.log("res2:", res)    //hahaha
})
promise.then(res => {
  console.log("res3:", res)    //hahaha
})

答案：

  • then内回调 不返回任何值，默认返回当前Promise
  • then内回调 返回Promise
  • then内回调 返回 普通值(数值/字符串/普通对象/undefined)，普通的值被作为一个新的Promise的resolve值

二、什么是Promise.resolve()

Promise.resolve() 表示状态为fulfilled的promise对象

Promise.resolve()
// 等同于
new Promise((resolve)=>{resolve()})

为什么会有下面的执行结果？ 感觉十分异常

Promise.resolve().then(() => {
  console.log(0);
  return Promise.resolve(4)
}).then(res => {
  console.log(res)
})
Promise.resolve().then(() => {
  console.log(1);
}).then(() => {
  console.log(2);
}).then(() => {
  console.log(3);
}).then(() => {
  console.log(5);
}).then(() =>{
  console.log(6);
})
// 0,1,2,3,4,5,6

(
  async function() {
    return Promise.resolve()
  }
)().then(()=>{
  console.log(1)
})
new Promise((resolve) => {
  resolve()
}).then(()=>{
  console.log(2)
}).then(()=>{
  console.log(3)
})
/// 2 3 1

答案：

如果promise内返回的对象具有可调用的then方法，则会在微任务队列中再插入一个任务NewPromiseResolveThenableJob，这就慢了一拍；这个任务会执行这个then方法，如果这个then方法是来自于promise的，则因为是异步的又慢了一拍，所以一共慢了两拍。

参考

三、Promise.all缺陷和Promise.allSettled

Promise.all() 的缺陷

其中任意一个 promise 被 reject ，Promise.all 就会立即被 reject ，不在执行then。

数组中其它未执行完的 promise 依然是在执行的，但是Promise.all 没有返回它们的结果，同时Promise.all 没有采取任何措施来取消它们的执行。

Promise.allSettled()

Promise.allSettled() 可以获取数组中每个 promise 的结果，无论成功或失败

只有then方法 所有结果都会在then中体现

注意

彼此相互依赖，一个失败全部失效(全无或全有)用 Promise.all ;相互独立，获取每个结果用 Promise.allSettled

四、Promise.race() 使用

多个promise执行，最快的执行Promise.race()的then或者catch

里面的promise依旧会执行

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
      console.log(0)
  }, 1000);
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
      console.log(2)
    resolve('Promise 2 resolved');
  }, 2000);
});
Promise.race([promise1, promise2]).then(result => {
  console.log(result); // "Promise 1 resolved"
});
// 0
//Promise 1 resolved
//2

到此这篇关于JavaScript promise的使用和原理分析的文章就介绍到这了,更多相关JS promise内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解JavaScript中Promise类的使用方法

    目录 1. all 2.  allSettled 3.  race 4. any 这篇主要讲一下Promise的类方法的基本使用,至于Promise的基本使用这里就不赘述了,之前也有手写过Promise.实现了Promise的核心逻辑.其实我们平时用Promise也挺多的,不过又出现了两个新的语法(ES11,ES12新增了两个),所以这篇就简单说一下,也挺简单 1. all Promise.all方法我们可以传入一个数组参数,数组中可以放多个Promise,它会等所有的Promise的状态都为f

  • 一文总结JavaScript中Promise遇到的问题

    目录 什么是Promise 1. 是否可以使用return 代替 resolve 2. 使用throw还是reject? 示例1:不会被catch的throw Error 示例2:不使用reject而使用throw 3. Promise的执行时间 3.1 resolve后面的代码会不会被执行? 3.2 当Promise遇到setTimeout 3.3 async/await 与Promise 什么是Promise 国内比较流行的看法: 阮一峰: Promise 对象 Promise 是异步编程的

  • JavaScript实现手写promise的示例代码

    目录 背景 需求 then的链式调用 Promise.all 背景 promise 作为前端开发中常用的函数,解决了 js 处理异步时回调地狱的问题,大家应该也不陌生了,今天来学习一下 promise 的实现过程,这样可以加(面)深(试)理(要)解(考). 需求 我们先来总结一下 promise 的特性: 使用: const p1 = new Promise((resolve, reject) => { console.log('1'); resolve('成功了'); }) console.l

  • JavaScript使用Promise实现并发请求数限制

    目录 没有Promise的并发请求 使用Promise限制并发请求 使用Promise实现并发请求数限制 总结 没有Promise的并发请求 在Web开发中,我们经常需要发起多个异步请求来获取数据.例如,我们可能需要从服务器获取一些用户信息.文章内容.评论列表等等.如果我们使用的是传统的JavaScript回调函数,可能会写出类似下面这样的代码: function getUsers(callback) { fetch('https://example.com/users', (response)

  • JS Promise axios 请求结果后面的.then() 是什么意思

    JS Promise axios 请求结果后面的.then() 是什么意思

    目录 Promise 对象 Promise 对象的状态 回调函数 Promise.then() 绑定回调函数 使用 Promise:链式调用 链式调用的实现 错误处理 常见错误 创建 Promise 对象 Promise 其他静态方法 创建已决议的 Promise 对象 多个 Promise 对象 结语&参考文献 Promise 是JS中一种处理异步操作的机制,在现在的前端代码中使用频率很高.Promise 这个词可能有点眼生,但你肯定见过 axios.get(...).then(res =>

  • JavaScript实现按键精灵的原理分析

    JavaScript实现按键精灵的原理分析

    最近有个需求,需要在页面上面自动点击.输入.提交. 用以模拟真实用户的操作行为,可以通过直接执行某个元素绑定的事件,来执行操作. 也可以创建事件,再派发事件,执行操作.关于事件的更多细节,可以参考<JavaScript中事件处理> 1.模拟MouseEvent中的click事件,x与y位置随机点击 2.模拟TouchEvent中的touchstart和touchmove,用scroll来做滑动效果 3.模拟FocusEvent,聚焦到屏幕中的输入框内 一.鼠标事件MouseEvent Mous

  • javascript类继承机制的原理分析

    目前 javascript的实现继承方式并不是通过"extend"关键字来实现的,而是通过 constructor function和prototype属性来实现继承.首先我们创建一个animal 类 js 代码 复制代码 代码如下: var animal = function (){ //这就是constructor function 了 this .name = 'pipi'; this .age = 10; this .height = 0; } //建立一个动物的实例 var

  • firefox浏览器下javascript 拖动层效果与原理分析代码

    firefox下实现可拖动层代码 www.jb51.net 拖动层效果代码 var obj=0; var x=0; var y=0; var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE var ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox function find(evt,objDiv){ obj = objDiv if (ff)

  • JavaScript函数柯里化原理与用法分析

    JavaScript函数柯里化原理与用法分析

    本文实例讲述了JavaScript函数柯里化原理与用法.分享给大家供大家参考,具体如下: 柯里化是这样的一个转换过程,把接受多个参数的函数变换成接受一个单一参数(译注:最初函数的第一个参数)的函数,如果其他的参数是必要的,返回接受余下的参数且返回结果的新函数. 也就是说是固定部分参数,返回一个接受剩余参数的函数,也称为部分计算函数,目的是为了缩小适用范围,创建一个针对性更强的函数. 例如,我想创建一个做自我介绍的函数,每个人只要输入自己姓名.性别.年龄即可.但是当A使用这个函数时,每次调用,都必

  • JavaScript中使用import 和require打包后实现原理分析

    前言: 之前使用ES6写代码,webpack打包后上线,一点问题没有,也看过打包后的代码,长的很乱,也没敢看看咋回事,加载后就是能运行! 今天通过个例子理解一下打包前,和打包后的代码! 1.创建文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个 index.html 文件).接下来我们再创建三个文件: index.ht

  • JavaScript设计模式之门面模式原理与实现方法分析

    本文实例讲述了JavaScript设计模式之门面模式原理与实现方法.分享给大家供大家参考,具体如下: 外部与一个子系统的通信必须通过一个系统的一个门面对象进行,这就是门面模式. 门面模式具备如下两个角色: 1. 门面角色 客户端可以调用这个角色方法,此角色中有子系统的应用(知晓相关的(一个或多个)子系统的功能和责任).本角色会将所有从客户端发来的请求委派到相应的子系统去. 2. 子系统角色 可以同时有一个或多个子系统.每一个子系统都不是一个单独的类,而是一些类的集合.每一个子系统都可以被客户端直

  • JavaScript事件发布/订阅模式原理与用法分析

    本文实例讲述了JavaScript事件发布/订阅模式原理与用法.分享给大家供大家参考,具体如下: 1.发布/订阅模式也是诸多设计模式当中的一种: 2.这种方式可以在es5下相当优雅地处理异步操作: 3.什么是发布/订阅呢?我们举个栗子: 假设fn1,fn2,fn3都可以视作一个事件的发布者,执行它,就会发布一个事件.这个时候,我们可以通过一个事件的订阅者去批量订阅并处理这些事件,包括它们的先后顺序.增加一个消息订阅者的方法: class AsyncFunArr { constructor (..

  • javascript设计模式 – 抽象工厂模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 抽象工厂模式原理与应用.分享给大家供大家参考,具体如下: 介绍:基于工厂模式,继续升级.来解决工厂模式存在多个工厂类的问题.主要的思想是将一些相关的产品组成一个产品族,由同一个工厂来统一生产. 定义:抽象工厂模式提供一个创建一系列相关或相互依赖的接口,而无须指定他们具体的类.抽象工厂模式又称kit模式,它是一种对象创建型模式. 场景:还是上面的Dialog类,如果继续向后发展,会有各种各样的弹窗,如果新增一个弹窗包含了notice和toast.这样

  • javascript设计模式 – 职责链模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 职责链模式原理与用法.分享给大家供大家参考,具体如下: 介绍:很多情况下,在一个软件系统中可以处理某个请求的对象不止一个.例如一个网络请求过来,需要有对象去解析request Body,需要有对象去解析请求头,还需要有对象去对执行对应controller.请求一层层传递,让每一个对象都基于请求完成自己的任务,然后将请求传递给下一个处理程序.是不是感觉有点中间件的感觉. 定义:职责链就是避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求.将

  • javascript设计模式 – 享元模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 享元模式原理与用法.分享给大家供大家参考,具体如下: 介绍:在我们日常开发中需要创建很多对象,虽然垃圾回收机制能帮我们进行回收,但是在一些需要重复创建对象的场景下,就需要有一种机制来进行优化,提高系统资源的利用率. 享元模式就是解决这类问题,主要目的是减少创建对象的数量.享元模式提倡重用现有同类对象,如未找到匹配的对象则创建新对象 定义:运用共享技术有效的支持大量细粒度对象的复用.系统只适用少量的对象,而这些对象都很相似,状态变化很小,可以实现对象

随机推荐