Warum funktioniert versprechen.finally in meinem Vue-Projekt nicht in Edge?

Ich habe enorme Probleme damit, meine Polyfills in Edge zum Laufen zu bringen. Ich habe versucht, der Dokumentation mit verschiedenen Versuchen zu folgen, die alle nicht funktionierten. Es scheint vielversprechend zu sein. Letztendlich funktioniert das nicht. Dies geschieht in einem vuex-Modul, daher habe ich versucht, vuex zu transpileDependencies in vue.config hinzuzufügen, aber ohne Glück.

Meine babel.config.js:

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

In meiner main.js habe ich ganz oben die folgenden zwei Importe:

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

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

Beachten Sie, wie oben erwähnt, habe ich sowohl mit als auch ohne die transpileDepedencies versucht. Hier steht vue / babel-preset-app , es7.promise.finallydie als Standard-Polyfill enthalten ist

Versionen:

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

Update 13/02

Also habe ich versucht, Promise.prototype auf meiner Site in edge einzugeben, und es scheint, dass es polyfilled ist:

Derzeit untersuche ich, ob ein Teil meiner Kette (Axios / Vue Axios) kein Versprechen zurückgibt. Da es in Chrom funktioniert, vermute ich, dass ein Teil der Kette nicht richtig polygefüllt wird?

Das ist meine gesamte Kette:

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

Ich habe mich jemals zuvor mit diesem Problem befasst. Nur endlich hat Edge nicht funktioniert. Ich habe endlich wie unten VVV aktualisiert und es hat funktioniert.

Dies sollte die Ausbreitung der thenable des Griff Spezies zusätzlich zu den Verhaltensweisen nachfolgend aufgeführt:

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;

Diese Implementierung basiert auf dem dokumentierten Verhalten von finally () und hängt davon ab, dass then () der Spezifikation entspricht:

Ein endgültiger Rückruf erhält kein Argument, da es kein zuverlässiges Mittel gibt, um festzustellen, ob das Versprechen erfüllt oder abgelehnt wurde. Dieser Anwendungsfall ist genau dann gedacht, wenn Sie sich nicht um den Ablehnungsgrund oder den Erfüllungswert kümmern und es daher nicht erforderlich ist, ihn anzugeben.

Im Gegensatz zu Promise.resolve(2).then(() => {}, () => {})(was mit undefined aufgelöst wird) Promise.resolve(2).finally(() => {})wird mit 2 aufgelöst.

Ebenso wird im Gegensatz zu Promise.reject(3).then(() => {}, () => {})(was mit undefined erfüllt wird) Promise.reject(3).finally(() => {}) mit 3 abgelehnt.

Hinweis : Ein Wurf (oder die Rückgabe eines abgelehnten Versprechens) im endgültigen Rückruf lehnt das neue Versprechen mit dem Ablehnungsgrund ab, der beim Aufruf von throw () angegeben wurde.

Dies ist ein bekanntes Problem in core-js .

Theoretisch bietet Edge eine Promise-Polyfüllung für schließlich, aber möglicherweise ist etwas mit der Funktionserkennung oder Ihrer Browserliste los, und Sie müssen eine Polyfüllung bereitstellen: Achselzucken:

Ich würde sowohl das Vue Babel Plugin als auch Core-Js aus Ihrem Projekt löschen und dann npm sie neu installieren.

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

• npm install core-js --save

Stellen Sie außerdem sicher, dass Sie core-js @ 3 über Ihre Konfiguration (babel.config.js) hier verwenden

Schließlich gibt es einige Github-Probleme, die sich mit Polyfills + Promises in Bezug auf die anderen Bibliotheken von Drittanbietern befassen, die in Ihrem Vuex-Shop ausgeführt werden. Fügen Sie alle drei dieser Bibliotheken (Axios, Vue-Axios, Vuex) zu Ihrem transpileDependenciesAbschnitt hinzu. Wenn dies das Problem behebt, entfernen Sie die Abhängigkeiten, um festzustellen, ob sie benötigt werden.

Versuchen Sie .browserslistrc, Ihrem Projektstamm eine Datei mit folgendem Inhalt hinzuzufügen :

> 1%
last 2 versions

Informationen zur Konfiguration finden Sie unter https://github.com/browserslist/browserslist#best-practiceslast versions .

Wenn dadurch fehlende Polyfüllungen nicht behoben werden, deaktivieren Sie das verwendete Plugin, das die Anzahl der Chunks begrenzt, um sicherzustellen, dass keine Polyfüllungen weggelassen werden.

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