为什么我的 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/babel-preset-app es7.promise.finally 作为默认 polyfill 包含在内

版本：

• Microsoft Edge：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 的 species 的传播：

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(() => {}, () => {})（它将是 用未定义解决），Promise.resolve(2).finally(() => {}) 将是 用 2 解决。

同样，不像Promise.reject(3).then(() => {}, () => {})（ 将用 undefined 实现），Promise.reject(3).finally(() => {}) 将被 3 拒绝。

注意：finally 中的抛出（或返回被拒绝的承诺） 回调将拒绝带有拒绝原因的新承诺 调用 throw() 时指定。

Answer 2

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

理论上，Edge 为 finally 提供了一个 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) here使用 core-js@3

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

Answer 3

尝试将.browserslistrc 文件添加到您的项目根目录，内容如下：

> 1%
last 2 versions

查看https://github.com/browserslist/browserslist#best-practiceslast versions 配置信息。

---

如果这不能解决缺少的 poly-fill，请尝试禁用您正在使用的限制块数量的插件，以确保这不会导致任何 poly-fill 被忽略。

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