iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScriptpromise的使用和原理分析
  • 513
分享到

JavaScriptpromise的使用和原理分析

JavaScriptpromise原理JSpromise 2023-05-15 11:05:51 513人浏览 安东尼
摘要

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

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

--结束END--

本文标题: JavaScriptpromise的使用和原理分析

本文链接: https://www.lsjlt.com/news/208930.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScriptpromise的使用和原理分析
    目录一、为什么一个promise可以调用多个.then方法二、什么是Promise.resolve()三、Promise.all缺陷和Promise.allSettled四、Prom...
    99+
    2023-05-15
    JavaScript promise原理 JS promise
  • JavaScriptPromise原理与实现刨析
    目录1 Promise核心逻辑实现2 加入异步逻辑3 then方法添加多次调用逻辑4 链式调用then方法5 Promise错误捕获6 then方法参数设置为可选7 实现Promis...
    99+
    2022-11-13
    JavaScript Promise JavaScript Promise原理 JS Promise
  • @TransactionalEventListener的使用和实现原理分析
    目录一、问题描述二、使用场景三、@TransactionalEventListener详解四、代码示例五、实现原理六、总结一、问题描述 平时我们在完成某些数据的入库后,发布了一个事件...
    99+
    2024-04-02
  • Handler 原理分析和使用之HandlerThread
    HandlerThread是一个带有Looper的线程类,它继承自Thread类,并且实现了Runnable接口。通过Handler...
    99+
    2023-09-12
    Handler
  • 如何分析Swiper插件的原理和使用
    今天给大家介绍一下如何分析Swiper插件的原理和使用。文章的内容小编觉得不错,现在给大家分享一下,觉得有需要的朋友可以了解一下,希望对大家有所帮助,下面跟着小编的思路一起来阅读吧。Swiper介绍swiper是一款开源的解决前端开发中触摸...
    99+
    2023-06-29
  • 使用Feign动态设置header和原理分析
    目录Feign动态设置header和原理例如先说解决办法设置Feign的header信息(两种形式)1.在方法参数前面添加@RequestHeader注解2.实现RequestInt...
    99+
    2024-04-02
  • Ajax原理及使用的示例分析
    这篇文章给大家分享的是有关Ajax原理及使用的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   Ajax原理   AJAX即“Asynchronous Javasc...
    99+
    2024-04-02
  • vue3中的setup使用和原理解析
    目录1.前言2.setup3.源码分析setupStatefulComponent执行setup函数 finishComponentSetup4.总结1.前言 最近在做vu...
    99+
    2024-04-02
  • 如何使用MyCat分表分库原理分析
    这篇文章给大家分享的是有关如何使用MyCat分表分库原理分析的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。MyCat是一个开源的分布式数据库系统,是一个实现了MySQL协议的服务...
    99+
    2024-04-02
  • Javascript闭包使用场景的原理分析
    这篇文章给大家分享的是有关Javascript闭包使用场景的原理分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、闭包Javascript中,只有函数内部的子函数才能读取局部变量,闭包就是能够读取其他函数内部...
    99+
    2023-06-25
  • 使用PDO防sql注入的原理分析
    前言 本文使用pdo的预处理方式可以避免sql注入。下面话不多说了,来一起看看详细的介绍吧 在php手册中'PDO--预处理语句与存储过程'下的说明: 很多更成熟的数据库都支持预处理语句的概念。什么是...
    99+
    2024-04-02
  • 解析vue3的ref,reactive的使用和原理
    目录1.前言2.比较3.ref源码解析4.reactive源码解析createReactiveObjecthandles的组成get陷阱set陷阱5.总结1.前言 vue3新增了re...
    99+
    2024-04-02
  • bootstrap的原理分析
    这篇文章主要介绍了bootstrap的原理分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。网格系统的实现原理,是通过定义容器大小,平分12...
    99+
    2024-04-02
  • Vite的原理分析
    这篇文章主要介绍了Vite的原理分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. 概述Vite是一个更轻、更快的web应用开发工具,面向现代浏览器。底层基于ECMASc...
    99+
    2023-06-29
  • Google和Facebook不使用Docker的原理解析
    写作本文的起因是我想让修改后的分布式 PyTorch 程序能更快的在 Facebook 的集群上启动。探索过程很有趣,也展示了工业机器学习需要的知识体系。 2007 年我刚毕业后在 ...
    99+
    2024-04-02
  • ReactcreateElement方法使用原理分析介绍
    目录摘要1.创建方法2.处理type3.处理config4.处理children5.对比真正的React.createElement源码摘要 在上一篇说过,React创建元素有两种方...
    99+
    2024-04-02
  • Reactthis.setState方法使用原理分析介绍
    目录摘要1.异步的setState2.多个setState方法3.手动实现mySetState摘要 这一篇文章,主要是简单的实现一下this.setState方法,为了实现该方法,就...
    99+
    2024-04-02
  • Mybatis的一级缓存和二级缓存原理分析与使用
    目录Mybatis的一级缓存和二级缓存1 Mybatis如何判断两次查询是完全相同的查询2 二级缓存2.1 二级缓存配置2.2 二级缓存特点2.3 配置二级缓存2.4 测试Mybat...
    99+
    2024-04-02
  • CSS原理分析
    这篇“CSS原理分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS原理分析”文章吧。...
    99+
    2024-04-02
  • HTTPS原理分析
    这篇文章主要介绍“HTTPS原理分析”,在日常操作中,相信很多人在HTTPS原理分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTTPS原理分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!HTTPS...
    99+
    2023-06-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作