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就需要在文件内再引入一次,否则在当前组件中兼容无效

相关推荐
gnip3 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫4 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel5 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼5 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手9 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法9 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku9 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode9 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu9 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu9 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript