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

让我的polyfill在Edge中工作时遇到了很大的麻烦。我尝试了各种尝试，但都没有按照文档进行操作。这似乎是有希望的。最后特别是那是行不通的。这是在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被列为默认的填充工具

版本：

• 微软Edge：44.18
• 微软EdgeHTML 18.18362
• @ vue / cli-plugin-babel“：“ ^ 4.1.2”
• “ core-js”：“ ^ 3.6.4”
• “ regenerator-runtime”：“ ^ 0.13.3”

更新13/02

因此，我尝试在我的网站的边缘中键入Promise.prototype，但看起来确实是多填充的：

因此，目前我正在调查链中的某些部分（axios / vue axios）是否未返回承诺。由于它在镀铬中工作，我怀疑链的一部分未正确填充吗？

这是我的整个连锁店：

/* 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}`);
  },
  ...
}

我以前曾经遇到过这个问题。直到最后在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(() => {}, () => {})（将通过undefined实现）不同，Promise.reject(3).finally(() => {}) 将以3拒绝。

注意：finally回调中的throw（或返回被拒绝的promise）将以调用throw（）时指定的拒绝原因拒绝新的promise。

这是core-js中的一个已知问题。

从理论上讲，Edge最终提供了Promise polyfill，但是功能检测或浏览器列表可能正在发生某些情况，因此您需要提供polyfill：shrug：

我会从您的项目中删除Vue babel插件和core-js，然后npm重新安装它们。

• npm install @vue/cli-plugin-babel --save-dev

• npm install core-js --save

另外，请确保在此处通过配置（babel.config.js）使用core-js @ 3

最后，还有一些Github问题，涉及在您的vuex商店中执行的其他第三方库的polyfills + Promises。将所有这三个库（axios，vue-axios，vuex）添加到您的transpileDependencies部分。如果可以解决，请开始删除依赖项以查看是否需要它们。

尝试将包含.browserslistrc以下内容的文件添加到项目根目录：

> 1%
last 2 versions

请参阅有关配置的https://github.com/browserslist/browserslist#best-practices信息last versions。

如果这不能解决丢失的多边形填充的问题，请尝试禁用正在使用的插件，该插件会限制块的数量，以确保这不会导致任何多边形填充的遗漏。

plugins: [
  new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 6,
  }),
],