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

15

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.

entrez la description de l'image ici

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: ici

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.Kirk.
la source
3
Intéressant, Edge ne devrait pas avoir besoin d'un polyfill car il prend finally()en charge Promise depuis la v18
Daniel
Par curiosité, quelle est la version EdgeHTML? Vous pouvez le trouver juste en dessous où vous trouvez la version Edge. Je demande parce que les bases CanIUse prennent en charge cela. De leur site:*Version number used for Edge is based on the number of EdgeHTML rather than Edge itself. This is because EdgeHTML is the engine for Edge that is related to feature support change.
Tanner
Microsoft EdgeHTML 18.18362
J.Kirk.
2
Edge devrait vous dire que c'est une promesse. Il dit plutôt que c'est un objet. L'objet retourné n'est donc pas la promesse attendue.
Mouser
2
Cette question pourrait être améliorée en fournissant un dépôt réduit reproduisant le problème afin que d'autres personnes puissent aider. Un site comme codesandbox.io pourrait être utilisé pour cela.
Jair Reina

Réponses:

1

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 ().

Midas Dev
la source
0

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.

Jess
la source
J'ai essayé toutes vos suggestions, malheureusement, le même résultat :(
J.Kirk.
Bizarre. Un plugin tiers supprime-t-il enfin Promise.fin?
Jess
Désolé de la réponse tardive. Comment savoir si un plugin tiers l'a supprimé?
J.Kirk.
0

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,
  }),
],
Marc
la source
J'ai déjà le browserslistrc avec les versions que vous avez énumérées. Vient de tester sans le plugin - n'a eu aucun effet :(
J.Kirk.
Mon fichier plugin babel ne dispose que: module.exports = {préréglages: [ '@ vue / cli-plugin-babel / preset]}
Marc
et votre promesse fonctionne enfin en pointe? Avez-vous la possibilité de partager votre liste de packages et vos configurations afin que je puisse essayer de déduire quel package est à l'origine du problème?
J.Kirk.
Je crée toujours mes projets en utilisant cli.vuejs.org/guide/creating-a-project.html#vue-create mais Edge 18+ prend enfin en charge () il n'y a pas besoin de poly-fill, uniquement pour Internet Explorer?
Marc
Votre problème peut provenir de l'ApiService que vous utilisez, il se peut qu'il ne renvoie pas une promesse native mais une émulation de sa propre création. Essayez de configurer le même appel en utilisant axios directement comme test.
Marc