promise.prototype.finally重写和兼容火狐低版本浏览器

一、finally()方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的

复制代码
let promise = new Promise()
promise
.then(result => {})
.catch(error => {})
.finally(() => {})

finally方法的回调函数不接受任何参数;finally方法里面的操作,与状态无关,不依赖于 Promise 的执行结果

二、finally() 的实现(重写finally,会将原promise的finally方法覆盖)

复制代码
Promise.prototype.finally = function (callback) {
// 创建一个新的promise实例并返回
 return new Promise((resolve, reject) => {
 // 调用原promise的then方法并将resolve和reject作为回调函数传递过去
   this.then(
   // 并抛出原promise执行成功的值
     value => resolve(callback()).then(() => value),
     // 并抛出原promise执行错误的原因
     reason => reject(callback()).then(() => { throw reason })
   )
 })
};

上面代码中,不管前面的 Promise 是fulfilled还是rejected,都会执行回调函数callback,并且将成功的值或者失败的原因抛出来

三、finally() 兼容火狐低版本浏览器的方法(一般在main.js中引入兼容方式可以整个项目的finally)。一定要在Vue.use()之前引入

3.1、使用import引入

复制代码
`import prototypeFinally from 'promise.prototype.finally' 
prototypeFinally.shim()`

3.2、使用require引入

复制代码
require('promise.prototype.finally').shim()

3.3、特定情况下以上两种引入方式不起作用,可以尝试使用下面的方式(我遇到的情况是mirco-app中开启微前端上面两种兼容方式会失效)

复制代码
import 'core-js/features/promise/finally'

注意:

如果有引入的外部组件不是在main.js中生成vue模板的文件,finally就需要在文件内再引入一次,否则在当前组件中兼容无效

相关推荐
群联云防护小杜8 分钟前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1231 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜051 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界1 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku1 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员1 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句1 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿1 小时前
Web第二次笔记
前端·javascript
良辰未晚1 小时前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas
Dream耀2 小时前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript