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

相关推荐
前端小巷子几秒前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆1 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了1 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆7 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆7 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆8 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆9 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er15 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子16 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆21 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js