javascript - 为什么我的 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 包含在内

版本:

微软边缘:44.18

Microsoft EdgeHTML 18.18362

@vue/cli-plugin-babel": "^4.1.2"

“核心js”:“^3.6.4”

“再生器运行时”:“^0.13.3”

更新 13/02

因此，我尝试在我的站点上的边缘键入 Promise.prototype，它确实显示为 polyfill:

所以目前我正在调查我的链(axios/vue axios)的某些部分是否没有返回 promise 。由于它在 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()符合规范:

A finally callback will not receive any argument, since there's no reliable means of determining if the promise was fulfilled or rejected. This use case is for precisely when you do not care about the rejection reason, or the fulfillment value, and so there's no need to provide it.

Unlike Promise.resolve(2).then(() => {}, () => {}) (which will be resolved with undefined), Promise.resolve(2).finally(() => {}) will be resolved with 2.

Similarly, unlike Promise.reject(3).then(() => {}, () => {}) (which will be fulfilled with undefined), Promise.reject(3).finally(() => {}) will be rejected with 3.

Note: A throw (or returning a rejected promise) in the finally callback will reject the new promise with the rejection reason specified when calling throw().