Javascript 为什么promise.finally在我的Vue项目中不能在Edge中工作？

我很难让我的多边形填充在Edge中工作。我试着按照文档进行各种尝试，但都没有成功。这似乎是承诺。最后明确地说，这是行不通的。这发生在一个vuex模块中，因此我尝试在vue.config中将vuex添加到transpileDependencies中，但没有成功

My babel.config.js：

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

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

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

My 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'],
};

注：如上所述，我已尝试使用和不使用透明胶片。这里说，

es7.promise.finally

作为默认的polyfill包含在内

版本：

• 微软边缘：44.18

---

• Microsoft EdgeHTML 18.18362
• @vue/cli插件巴别塔“^4.1.2”
• “核心js”：“^3.6.4”
• “再生器运行时”：“^0.13.3”

更新13/02

因此，我尝试在我的网站上的edge中键入Promise.prototype，但它似乎是多填充的：

因此，目前我正在调查我的链的某个部分（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}`);
  },
  ...
}

---

我以前从未面对过这个问题。 只是最后没有在边缘工作。 我终于更新了下面的VVV，它工作了

除了下面详述的行为外，还应处理该表的传播：

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回调不会收到任何参数，因为没有 确定承诺是否履行的可靠手段 拒绝。此用例正是针对您不关心 拒绝原因，或履行价值，因此没有必要 提供它

不同于

Promise.resolve（2）。然后（（）=>{}，（）=>{}）

（这将是 解析为未定义），

Promise.resolve（2）。最后（（）=>{}）

将 以2解决

类似地，不同于

Promise.reject（3）
将使用未定义的“，
承诺。拒绝（3）。最后（（）=>{}）
将以3分被拒绝

注意：最后一次抛出（或返回被拒绝的承诺）
callback将拒绝带有拒绝原因的新承诺
调用throw（）时指定

这是一个众所周知的问题

从理论上讲，Edge最终提供了一个polyfill的承诺，但也许特征检测或浏览列表中出现了一些问题，您需要提供一个polyfill:耸耸肩：

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


npm安装@vue/cli插件babel——保存开发

npm安装核心js——保存


另外，确保您使用的是core-js@3通过您的配置（babel.config.js）

最后，Github还讨论了polyfills+对vuex商店中执行的其他第三方库的承诺。添加所有这三个库（axios、vue axios、vuex）到您的
transpileDependencies
部分。如果解决了此问题，请开始删除依赖项以查看是否需要这些依赖项。
尝试向项目根目录添加一个
.browsslistrc
文件，其中包含以下内容：

> 1%
last 2 versions

请参阅有关
最新版本
配置的信息


如果这不能解决缺少多边形填充的问题，请尝试禁用您正在使用的限制块数的插件，以确保这不会导致忽略任何多边形填充

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

有趣的是，Edge不需要多边形填充，因为它支持
finally（）
on Promise自V18起出于好奇，EdgeHTML版本是什么？您可以在找到Edge版本的正下方找到它。我这样问是因为CanIUse Base支持这一点。从他们的网站：
*Edge使用的版本号基于EdgeHTML的数量，而不是Edge本身。这是因为EdgeHTML是Edge的引擎t与功能支持更改有关。
Microsoft EdgeHTML 18.18362Edge应该告诉您这是一个承诺。它更确切地说，它是一个对象。因此，返回的对象不是预期的承诺。可以通过提供一个简化的回购协议来改进此问题，该协议复制了问题，以便其他人可以提供帮助。类似的网站可以用于此目的。尝试了你所有的建议，但不幸的是结果相同：（奇怪。是第三方插件删除承诺吗？最后？很抱歉回答晚了。我如何判断是否有第三方插件删除了它？我已经有了browserslistrc和你列出的版本。刚刚测试没有插件-没有效果：（我的babel插件文件只有：module.exports={presets:['@vue/cli plugin babel/preset']}和您的promise.finally在edge中工作？您是否可以共享您的包列表和配置，以便我可以尝试推断是哪个包导致问题？我总是使用edge 18+supports finally（）创建项目不需要多边形填充，仅适用于Internet Explorer？您的问题可能来自您正在使用的ApiService。它可能不会返回本机承诺，而是返回其自己创建的模拟承诺。请尝试直接使用axios设置相同的调用作为测试。