Почему в моем проекте Vue не работает Challenge.finally?

У меня огромные проблемы с тем, чтобы заставить мои полифилы работать в Edge. Я пытался следить за документацией с различными попытками все не работает. Кажется, это обещание. Наконец, это не работает. Это происходит в модуле vuex, поэтому я попытался добавить vuex к transpileDependencies в vue.config, но безуспешно.

Мой 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 на своем сайте в грани, и оказалось, что он заполнен:

Поэтому в настоящее время я расследую, не возвращает ли какая-то часть моей цепочки (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}`);
  },
  ...
}

Я когда-либо сталкивался с этой проблемой раньше. Только, наконец, не работал на 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 () спецификации:

И наконец, обратный вызов не получит никаких аргументов, поскольку нет надежных средств определения того, было ли обещание выполнено или отклонено. Этот вариант использования предназначен именно для случаев, когда вас не заботит причина отклонения или ценность выполнения, и поэтому нет необходимости указывать ее.

В отличие от Promise.resolve(2).then(() => {}, () => {})(который будет решен с неопределенным), Promise.resolve(2).finally(() => {})будет решен с 2.

Точно так же, в отличие от Promise.reject(3).then(() => {}, () => {})(который будет выполнен с неопределенным), Promise.reject(3).finally(() => {}) будет отклонено с 3.

Примечание . Бросок (или возвращение отклоненного обещания) в обратном вызове finally отклонит новое обещание с указанием причины отказа, указанной при вызове throw ().

Это известная проблема в core-js .

Теоретически, Edge предоставляет polyfill для Promise для finally, но, возможно, что-то происходит с определением функции или вашим списком браузеров, и вам нужно предоставить polyfill: shrug:

Я бы удалил плагин Vue babel и core-js из вашего проекта, а затем npm установил их заново.

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

• npm install core-js --save

Также убедитесь, что вы используете core-js @ 3 через конфигурацию (babel.config.js) здесь

Наконец, есть несколько проблем Github, говорящих о polyfills + Promises в отношении других сторонних библиотек, выполняемых в вашем магазине vuex. Добавьте все три из этих библиотек (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,
  }),
],