为什么我的 Vue 项目中的 promise.finally 在 Edge 中不起作用？

Question

我在让我的 polyfill 在 Edge 中工作时遇到了巨大的麻烦。我试图通过各种尝试来遵循文档，但都不起作用。它似乎是 promise.finally，特别是不起作用。这发生在vuex 模块中，所以我尝试将 vuex 添加到 vue.config 中的 transpileDependencies 但没有运气。

我的 babel.config.js：

module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', {
    useBuiltIns: 'entry',
  }]],
};

在我的 main.js 中，我在最顶部有以下两个导入：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

我的 vue.config.js

// eslint-disable-next-line import/no-extraneous-dependencies
const webpack = require('webpack');

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  configureWebpack: {
    // Set up all the aliases we use in our app.
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 6,
      }),
    ],
  },
  css: {
    // Enable CSS source maps.
    sourceMap: !isProd,
  },
  transpileDependencies: ['vuex'],
};

请注意，如上所述，我已经尝试过使用和不使用 transpileDepedencies。这里说VUE /巴贝尔，预置的应用程序是es7.promise.finally被列为默认的填充工具

版本：

• 微软边缘：44.18
• Microsoft EdgeHTML 18.18362
• @vue/cli-plugin-babel": "^4.1.2"
• "core-js": "^3.6.4"
• “再生器运行时”：“^0.13.3”

更新 13/02

所以我试图在我的站点上输入 Promise.prototype 并且它看起来确实是 polyfill：

所以目前我正在调查我的链的某些部分（axios/vue axios）是否没有返回承诺。由于它在 chrome 中工作，我怀疑链的一部分没有正确填充？

这是我的整个链条：

/* VUEX MODULE ACTION */  
[a.ALL_CUSTOMERS](context) {
    context.commit(m.SET_CUSTOMER_LOADING, true);
    CustomerService.getAll()
      .then(({ data }) => {
        context.commit(m.SET_CUSTOMERS, data);
      })
      .finally(() => context.commit(m.SET_CUSTOMER_LOADING, false));
  },

/* CUSTOMER SERVICE */
import ApiService from '@/common/api.service';
const CustomerService = {
  getAll() {
    const resource = 'customers/';
    return ApiService.get(resource);
  },
...
}

/* API SERVICE */
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

const ApiService = {
  init() {
    Vue.use(VueAxios, axios);
    let baseUrl = process.env.VUE_APP_APIURL;
    Vue.axios.defaults.baseURL = baseUrl;
  },

  setHeader() {
    Vue.axios.defaults.headers.common.Authorization = `Bearer ${getToken()}`;
  },

  get(resource) {
    this.setHeader();
    return Vue.axios.get(`${resource}`);
  },
  ...
}

Answer 1

我以前也遇到过这个问题。只是最终在Edge上不起作用。我最终像下面的 VVV 一样进行了更新，并且成功了。

除了下面详述的行为之外，这还应该处理 thenable物种的传播：

Promise.prototype.finally = Promise.prototype.finally || {
  finally (fn) {
    const onFinally = value => Promise.resolve(fn()).then(() => value);
    return this.then(
      result => onFinally(result),
      reason => onFinally(Promise.reject(reason))
    );
  }
}.finally;

此实现基于finally()的记录行为，并取决于then()是否符合规范：

finally 回调不会收到任何参数，因为没有可靠的方法来确定承诺是否已实现或被拒绝。此用例恰好适用于您不关心拒绝原因或履行价值的情况，因此无需提供它。

Promise.resolve(2).then(() => {}, () => {})与（将用 undefined 解析）不同，Promise.resolve(2).finally(() => {})将用 2 解析。

类似地，不像Promise.reject(3).then(() => {}, () => {})（将通过未定义来满足），Promise.reject(3).finally(() => {}) 将被拒绝为 3。

注意：finally 回调中的 throw（或返回被拒绝的 Promise）将拒绝新的 Promise，并在调用 throw() 时指定拒绝原因。