JavaScript promise的使用和原理分析

 更新时间:2023年04月12日 09:59:34   作者:肥肥呀呀呀  
Promise 是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务。由于 Promise 是 ES6 新增加的,所以一些旧的浏览器并不支持,苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性

一、为什么一个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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS解决url传值出现中文乱码的另类办法

    JS解决url传值出现中文乱码的另类办法

    为什么用表单的方式就可以传递中文,而URL的方式就不行了呢?非得用URL传值的方式才能解决问题吗?这里我想到了动态表单,何不用它来解决呢
    2013-04-04
  • JavaScript TAB栏切换效果的示例

    JavaScript TAB栏切换效果的示例

    这篇文章主要介绍了JavaScript TAB栏切换效果的示例,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2020-11-11
  • JS判断两个时间大小的示例代码

    JS判断两个时间大小的示例代码

    本篇文章只要是对JS判断两个时间大小的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 纯js实现打字机效果

    纯js实现打字机效果

    这篇文章主要为大家详细介绍了纯js实现打字机效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 浅谈Fetch 数据交互方式

    浅谈Fetch 数据交互方式

    这篇文章主要介绍了浅谈Fetch 数据交互方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • JS简易计算器实例讲解

    JS简易计算器实例讲解

    这篇文章主要为大家详细介绍了JS简易计算器实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • JavaScript验证Email(3种方法)

    JavaScript验证Email(3种方法)

    这篇文章主要介绍了JavaScript验证Email的3种方法,需要的朋友可以参考下
    2015-09-09
  • JS中artdialog弹出框控件之提交表单思路详解

    JS中artdialog弹出框控件之提交表单思路详解

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口。本文给大家介绍JS中artdialog弹出框控件之提交表单思路详解,对本文感兴趣的朋友一起学习吧
    2016-04-04
  • 微信小程序实现自定义picker选择器弹窗内容

    微信小程序实现自定义picker选择器弹窗内容

    这篇文章主要为大家详细介绍了微信小程序实现自定义picker选择器弹窗内容,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • JS关闭窗口或JS关闭页面的几种代码分享

    JS关闭窗口或JS关闭页面的几种代码分享

    这篇文章介绍了JS关闭窗口或JS关闭页面的几种代码,有需要的朋友可以参考一下
    2013-10-10

最新评论