前端基本功(一):不能不了解的Promise

2024-04-03 06:32

本文主要是介绍前端基本功(一):不能不了解的Promise,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

promise: 异步编程的解决方案(一)
一. promise是什么
  1. 从这个单词语义上可以得知:这是一个承诺。承诺以一种优雅的方式处理我们的异步操作的回调函数带来的一系列的问题(调用时序、异常捕获等)。目前基于promise实现的API与类库也是很多的,并且广泛被大家使用(fetch、axios、oss sdk等)。

  2. 曾几何时,我们在传统前端开发技术中,经常使用callback的方式来解决我们在处理异步数据请求,当业务场景过于复杂时,经常就会写出callback中再callback的代码,也就是大家常说的又臭又长的回调地狱。使用我们的promise方式处理,就可以优雅解决我们的问题。

  3. 我们可以在控制台打印一下我们的Promise对象。可以看到Promise是一个构造函数,在它的原型上拥有then、catch、finally等方法,自身拥有all、race、reject、resolve等方法。

二、 Promises/A+ 规范

ES6 中的 promise 实现是基于 Promises/A+ 规范。主要是对promise的状态、thenable对象、执行过程等进行规范。

  1. 状态:promise是一个拥有状态的对象,并且它的状态必须等待中(Pending)执行成功(Fulfilled)执行失败(Rejected)这三种中的一种。promsie状态 只能由 pending => fulfilled/rejected, 一旦修改就不能再变。
  2. thenable对象:拥有then方法的对象就是thenable对象,只要是promise就必须要会有then方法,then方法接受两个可选参数:onFulfilledonRejected。这两个参数一般来说都是函数,如果传入的不是函数将会被忽略。onFulfilled回调函数是在promise对象的状态变为resolved时调用,onRejected回调函数是在promise对象的状态变为rejected时调用。then方法同意也必须返回一个promise对象,这样就形成了链式调用。
三、API方法
  1. 静态方法

    1. Promise.resolve 返回一个fulfillled状态的promise对象。Promise.reject返回一个rejected状态的promise对象。可以认为是new Promise()的快捷方式。

      Promise.reslove('hahaha');
      // 相当于
      new Promise((relove, reject) => {reslove('hahahha');
      })Promise.reject('hahaha');
      // 相当于
      new Promise((relove, reject) => {reject('hahahha');
      })
    2. Promise.all 接收一个promise对象数组为参数: 多个promise任务同时执行,如果全部成功执行,则以数组的方式返回所有 Promise 任务的执行结果。 如果有一个 Promise 任务 rejected,则只返回 rejected 任务的结果。

      const promise1 = new Promise((reslove, reject) => {reslove(1);
      })
      const promise2 = new Promise((reslove, reject) => {reslove(2);
      })
      const promise3 = new Promise((reslove, reject) => {reject(3);
      })Promise.all([promise1, promise2]).then(data => {console.log('data', data); //  [1, 2]
      }, err => {console.log('err', err);
      })Promise.all([promise1, promise2, promise3]).then(data => {console.log('data', data);
      }, err => {console.log('err', err); // err 3
      })
    3. Promise.race接收一个promise对象数组为参数: 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话,就会继续进行后面的处理。

      // 之前有遇到给fetch设置timeout time的需求: 思路就是我们先定义超时promise,当我们的定时器在一定time后这个promise对象 reject. 将我们的请求方法与这个timeoutPromise同时放入Promise.race中就可以达到timeout的效果。const timeoutPromise = new Promise((resolve, reject) => {setTimeout(() => reject(new RequestException('网络超时', '当前网络环境不稳定,请稍后再试。')),timeout,);})Promise.race([fetchPromise, timeoutPromise]).then(data => ....);
  2. promise对象方法

    1. Promise.prototype.then方法:then方法接受两个可选参数:onFulfilledonRejectedthen方法是异步执行的.
    // onFulfilled 是用来接收promise成功的值
    // onRejected 是用来接收promise失败的原因
    promise.then(onFulfilled, onRejected);
    1. Promise.prototype.catch方法:在链式写法中可以捕获前面then中发送的异常。
    // 注意
    // onRejected 不能捕获当前onFulfilled中的异常
    promise.then(onFulfilled, onRrejected); // 可以写成:
    promise.then(onFulfilled).catch(onRrejected);  
    1. Promise.prototype.finally方法:不管 Promise 对象最后状态如何,都会执行的操作。(不再ES6中,ES2018引入标准)

      // 不管promise最后的状态,在执行完then或catch指定的回调函数以后,都会执行finally方法指定的回调函数。finally方法的回调函数不接受任何参数,这意味着没有办法知道,前面的 Promise 状态到底是fulfilled还是rejected。这表明,finally方法里面的操作,应该是与状态无关的,不依赖于 Promise 的执行结果。
      promise
      .then(result => {···})
      .catch(error => {···})
      .finally(() => {···});
    2. Promise.prototype.done方法:注意此方法并不在ES6以及Promise A+规范中规定以及实现。(但是很多第三方库提供了此方法的实现)

      if (typeof Promise.prototype.done === 'undefined') {Promise.prototype.done = function (onFulfilled, onRejected) {this.then(onFulfilled, onRejected).catch(function (error) {setTimeout(function () {throw error;}, 0);});};
      }
      var promise = Promise.resolve();
      promise.done(function () {JSON.parse('this is not json');    // => SyntaxError: JSON.parse
      });// done 对比 then
      // 1\. then方法并不会捕获当前onFulfilled中的错误,必须后面再跟catch。done中发生的异常直接抛出。
      // 2\. done之后不会反悔promise对象,就是done之后不能使用catch等方法组成方法链。

四、微任务(参考:javascript的运行机制)

new Promise((resolve, reject) => {resolve(1);
}).then(data => console.log(data));
console.log(2);// 上面的代码是先输出2, 再输出1.
// Promise立即执行,then函数分发到微任务Event Queue,Node.js中的process.nextTick同样也是分发到微任务Event Queue。
// Promise 的回调函数不是正常的异步任务,而是微任务(microtask)。宏任务必然是在微任务之后才执行的(因为微任务实际上是宏任务的其中一个步骤)。
// tip: process.nextTick()的意思就是定义出一个动作,并且让这个动作在下一个事件轮询的时间点上执行。

这篇关于前端基本功(一):不能不了解的Promise的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/872149

相关文章

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展,CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali