Perché promise.finally nel mio progetto Vue non funziona in Edge?

Ho enormi problemi a far funzionare i miei polyfill in Edge. Ho provato a seguire la documentazione con vari tentativi tutti non funzionanti. Sembra essere promettente, in definitiva specificamente che non funziona. Questo succede in un modulo vuex, quindi ho provato ad aggiungere vuex a transpileDependencies in vue.config ma senza fortuna.

Il mio babel.config.js:

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

Nel mio main.js ho le seguenti due importazioni in cima:

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

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

Nota come detto sopra ho provato sia con che senza transpileDepedencies. Qui si dice vue / babel-preimpostato-app , che es7.promise.finallyè incluso come polyfill di default

versioni:

• Microsoft Edge: 44.18
• Microsoft EdgeHTML 18.18362
• @ vue / cli-plugin-babel ":" ^ 4.1.2 "
• "core-js": "^ 3.6.4"
• "rigenerator-runtime": "^ 0.13.3"

Aggiornamento 13/02

Quindi ho provato a digitare Promise.prototype sul mio sito in edge e sembra che sia polifillato:

Quindi attualmente sto indagando se una parte della mia catena (axios / vue axios) non restituisce una promessa. Dal momento che funziona in Chrome, sospetto che una parte della catena non venga riempita correttamente?

Questa è la mia intera catena:

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

Ho mai affrontato questo problema prima. Solo alla fine non ha funzionato su Edge. Ho aggiornato finalmente come sotto VVV e ha funzionato.

Questo dovrebbe gestire la propagazione delle specie dell'allungabile oltre ai comportamenti dettagliati di seguito:

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;

Questa implementazione si basa sul comportamento documentato di finally () e dipende dal fatto che () sia conforme alla specifica:

Un callback infine non riceverà alcun argomento, poiché non esiste alcun mezzo affidabile per determinare se la promessa è stata rispettata o respinta. Questo caso d'uso è proprio quando non ti interessa il motivo del rifiuto, o il valore di adempimento, e quindi non è necessario fornirlo.

Diversamente Promise.resolve(2).then(() => {}, () => {})(che verrà risolto con indefinito), Promise.resolve(2).finally(() => {})verrà risolto con 2.

Allo stesso modo, a differenza di Promise.reject(3).then(() => {}, () => {})(che verrà soddisfatto con un indefinito), Promise.reject(3).finally(() => {}) verrà rifiutato con 3.

Nota : un lancio (o la restituzione di una promessa rifiutata) nel callback finale rifiuterà la nuova promessa con il motivo del rifiuto specificato quando si chiama throw ().

Questo è un problema noto in core-js .

In teoria, Edge fornisce un polyfill Promise per finalmente, ma forse sta succedendo qualcosa con il rilevamento delle funzionalità o l'elenco del browser ed è necessario fornire un polyfill: shrug:

Eliminerei sia il plug-in Vue babel che core-js dal tuo progetto e poi npm li installerei di nuovo.

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

• npm install core-js --save

Inoltre, assicurati di utilizzare core-js @ 3 tramite la tua configurazione (babel.config.js) qui

Infine, ci sono alcuni problemi di Github che parlano di polyfill + Promesse rispetto alle altre librerie di terze parti eseguite nel tuo negozio Vuex. Aggiungi tutte e tre le librerie (axios, vue-axios, vuex) alla tua transpileDependenciessezione. Se questo lo risolve, inizia a rimuovere le dipendenze per vedere se sono necessarie.

Prova ad aggiungere un .browserslistrcfile alla radice dei tuoi progetti con il seguente contenuto:

> 1%
last 2 versions

Vedi https://github.com/browserslist/browserslist#best-practices informazioni sulla last versionsconfigurazione.

Se ciò non risolve il problema del riempimento multiplo mancante, prova a disabilitare il plug-in che stai utilizzando che limita il numero di blocchi per assicurarti che ciò non causi l'omissione di eventuali riempimenti multipli.

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