Dlaczego promise.finally w moim projekcie Vue nie działa w Edge?

Mam ogromne kłopoty z uruchomieniem moich wielopełniaczy w Edge. Próbowałem postępować zgodnie z dokumentacją, ale różne próby nie przyniosły rezultatu. Wydaje się to być obiecujące. Ostatecznie nie działa. Dzieje się tak w module vuex, więc próbowałem dodać vuex do transpileDependencies w vue.config, ale bez powodzenia.

Mój babel.config.js:

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

W mojej main.js mam na górze dwa następujące importy:

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

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

Uwaga: jak wspomniano powyżej, próbowałem zarówno z transpileDepedencies, jak i bez. Mówi się tutaj: vue / babel-preset-app, która es7.promise.finallyjest dołączona jako domyślna polifill

Wersje:

• Microsoft Edge: 44,18
• Microsoft EdgeHTML 18.18362
• @ vue / cli-plugin-babel ":" ^ 4.1.2 "
• „core-js”: „^ 3.6.4”
• „regenerator-runtime”: „^ 0,13.3”

Aktualizacja 13/02

Próbowałem więc wpisać Promise.prototype na mojej stronie i wygląda na to, że jest wypełniony:

Obecnie badam, czy jakaś część mojego łańcucha (axios / vue axios) nie zwraca obietnicy. Skoro działa w chromie, podejrzewam, że część łańcucha nie jest prawidłowo wypełniana wielopunktowo?

To jest cały mój łańcuch:

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

Wcześniej miałem do czynienia z tym problemem. Dopiero w końcu nie działał na Edge. Zaktualizowałem w końcu jak poniżej VVV i zadziałało.

To powinno obsługiwać Rozkrzewiania thenable za gatunek oprócz zachowań wyszczególnionych poniżej:

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;

Ta implementacja opiera się na udokumentowanym zachowaniu w końcu () i zależy od tego, czy wtedy () będzie zgodna ze specyfikacją:

Ostatecznie wywołanie zwrotne nie otrzyma żadnego argumentu, ponieważ nie ma wiarygodnych sposobów ustalenia, czy obietnica została spełniona, czy odrzucona. Ten przypadek użycia dotyczy właśnie sytuacji, gdy nie zależy Ci na przyczynie odrzucenia lub wartości spełnienia, a więc nie musisz go podawać.

W przeciwieństwie do Promise.resolve(2).then(() => {}, () => {})(który zostanie rozwiązany z niezdefiniowanym), Promise.resolve(2).finally(() => {})zostanie rozwiązany z 2.

Podobnie, w przeciwieństwie do Promise.reject(3).then(() => {}, () => {})(co zostanie spełnione z niezdefiniowanym), Promise.reject(3).finally(() => {}) zostanie odrzucony z 3.

Uwaga : Rzut (lub zwrot odrzuconej obietnicy) w ostatecznym wywołaniu zwrotnym odrzuci nową obietnicę z podanym powodem odrzucenia podczas wywoływania throw ().

Jest to znany problem w core-js .

Teoretycznie Edge oferuje polietylen Promise na koniec, ale być może coś dzieje się z wykrywaniem funkcji lub listą przeglądarek i musisz podać polifill: wzruszenie ramion:

Chciałbym usunąć zarówno wtyczkę Vue Babel, jak i core-js z twojego projektu, a następnie npm zainstalować je na świeżo.

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

• npm install core-js --save

Upewnij się także, że używasz core-js @ 3 za pomocą config (babel.config.js) tutaj

Na koniec jest kilka problemów z Githubem mówiących o wypełnieniach + obietnicach w odniesieniu do innych bibliotek stron trzecich wykonanych w twoim sklepie vuex. Dodaj wszystkie trzy z tych bibliotek (axios, vue-axios, vuex) do swojej transpileDependenciessekcji. Jeśli to rozwiąże problem, zacznij usuwać zależności, aby sprawdzić, czy są potrzebne.

Spróbuj dodać .browserslistrcplik do katalogu głównego projektów z następującą zawartością:

> 1%
last 2 versions

Zobacz https://github.com/browserslist/browserslist#best-practices informacje na temat last versionskonfiguracji.

Jeśli to nie rozwiąże brakującego wypełnienia, spróbuj wyłączyć używaną wtyczkę, która ogranicza liczbę porcji, aby mieć pewność, że nie spowoduje to pominięcia wypełnień.

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