Pourquoi est-ce que promise.finally dans mon projet Vue ne fonctionne pas dans Edge?

J'ai énormément de mal à faire fonctionner mes polyfills dans Edge. J'ai essayé de suivre la documentation avec diverses tentatives qui ne fonctionnaient pas. Il semble que ce soit prometteur. Enfin, cela ne fonctionne pas. Cela se produit dans un module vuex , j'ai donc essayé d'ajouter vuex à transpileDependencies dans vue.config mais sans succès.

Mon babel.config.js:

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

Dans mon main.js, j'ai les deux importations suivantes tout en haut:

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

Notez que comme mentionné ci-dessus, j'ai essayé à la fois avec et sans transpileDepedencies. Il dit ici vue / babel-preset-app qui es7.promise.finallyest inclus comme polyfill par défaut

Versions:

• Microsoft Edge: 44.18
• Microsoft EdgeHTML 18.18362
• @ vue / cli-plugin-babel ":" ^ 4.1.2 "
• "core-js": "^ 3.6.4"
• "régénérateur-runtime": "^ 0.13.3"

Mise à jour 13/02

J'ai donc essayé de taper Promise.prototype sur mon site en bord et il semble qu'il soit polyfilled:

Donc actuellement j'étudie si une partie de ma chaîne (axios / vue axios) ne retourne pas de promesse. Puisqu'il fonctionne en chrome, je soupçonne qu'une partie de la chaîne n'est pas remplie correctement?

C'est toute ma chaîne:

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

J'ai déjà rencontré ce problème auparavant. Seulement finalement n'a pas fonctionné sur Edge. J'ai finalement mis à jour comme ci-dessous VVV et cela a fonctionné.

Cela devrait gérer la propagation des espèces du ménable en plus des comportements détaillés ci-dessous:

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;

Cette implémentation est basée sur le comportement documenté de finally () et dépend de la conformité de then () à la spécification:

Un rappel final ne recevra aucun argument, car il n'existe aucun moyen fiable de déterminer si la promesse a été tenue ou rejetée. Ce cas d'utilisation est précisément pour quand vous ne vous souciez pas de la raison du rejet ou de la valeur de réalisation, et donc il n'est pas nécessaire de le fournir.

Contrairement à Promise.resolve(2).then(() => {}, () => {})(qui sera résolu avec undefined), Promise.resolve(2).finally(() => {})sera résolu avec 2.

De même, contrairement à Promise.reject(3).then(() => {}, () => {})(qui sera rempli avec undefined), Promise.reject(3).finally(() => {}) sera rejeté avec 3.

Remarque : Un lancer (ou renvoyer une promesse rejetée) dans le rappel final rejettera la nouvelle promesse avec le motif de rejet spécifié lors de l'appel à throw ().

Il s'agit d'un problème connu dans core-js .

En théorie, Edge fournit un polyfill Promise pour enfin, mais peut-être que quelque chose se passe avec la détection de fonctionnalité ou votre liste de navigateurs et vous devez fournir un polyfill: haussement d'épaules:

Je voudrais supprimer à la fois le plugin Vue babel et core-js de votre projet, puis npm les installer à nouveau.

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

• npm install core-js --save

Assurez-vous également que vous utilisez core-js @ 3 via votre configuration (babel.config.js) ici

Enfin, il y a quelques problèmes avec Github concernant les polyfills + Promesses en ce qui concerne les autres bibliothèques tierces exécutées dans votre magasin vuex. Ajoutez ces trois bibliothèques (axios, vue-axios, vuex) à votre transpileDependenciessection. Si cela résout le problème, commencez à supprimer les dépendances pour voir si elles sont nécessaires.

Essayez d'ajouter un .browserslistrcfichier à la racine de vos projets avec le contenu suivant:

> 1%
last 2 versions

Voir https://github.com/browserslist/browserslist#best-practices sur la last versionsconfiguration.

Si cela ne résout pas le poly-fill manquant, essayez de désactiver le plug-in que vous utilisez qui limite le nombre de morceaux afin de vous assurer que cela n'entraîne pas l'omission de poly-fills.

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