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

相关推荐
前端 贾公子2 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐3 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
前端小万6 分钟前
一次紧急的现场性能问题排查
前端·性能优化
zhangzuying10267 分钟前
基于Vue3 +ElementuiPlus + Dexie.js自研的浏览器插件新建标签页tab
vue.js·typescript·echarts
lichong95112 分钟前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之video 的各种状态和生命周期调用说明
android·vue.js·macos
excel22 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手22 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360225 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep25 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo27 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端