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

15

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.

Geben Sie hier die Bildbeschreibung ein

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

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}`);
  },
  ...
}
J. Kirk.
quelle
3
Interessanterweise sollte Edge keine finally()Polyfüllung benötigen, da sie Promise seit Version 18 unterstützt
Daniel
Was ist aus Neugier die EdgeHTML-Version? Sie finden es direkt unten, wo Sie die Edge-Version finden. Ich frage, weil CanIUse-Basen dies unterstützen. Von ihrer Seite:*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
.
2
Edge sollte Ihnen sagen, dass es ein Versprechen ist. Es heißt eher, dass es ein Objekt ist. Das zurückgegebene Objekt ist also nicht das erwartete Versprechen.
Mouser
2
Diese Frage könnte verbessert werden, indem ein gekochtes Repo bereitgestellt wird, das das Problem reproduziert, damit andere Personen helfen können. Hierfür könnte eine Site wie Codesandbox.io verwendet werden.
Jair Reina

Antworten:

1

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.

Midas Dev
quelle
0

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.

Jess
quelle
Versuchte alle Ihre Vorschläge leider das gleiche Ergebnis :(
J.Kirk.
Seltsam. Löscht ein Plugin eines Drittanbieters Promise.finally?
Jess
Entschuldigung für die späte Antwort. Wie kann ich feststellen, ob ein Plugin eines Drittanbieters es gelöscht hat?
J. Kirk.
0

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,
  }),
],
Marc
quelle
Ich habe bereits die Browser-Liste mit den von Ihnen aufgelisteten Versionen. Gerade ohne das Plugin getestet - hatte keine Wirkung :(
J.Kirk.
Meine Babel-Plugin-Datei enthält nur: module.exports = {presets: ['@ vue / cli-plugin-babel / preset']}
Marc
und dein Versprechen. Endlich in Randlage? Gibt es eine Möglichkeit, Ihre Paketliste und Konfigurationen zu teilen, damit ich versuchen kann, herauszufinden, welches Paket das Problem verursacht?
J. Kirk.
Ich erstelle meine Projekte immer mit cli.vuejs.org/guide/creating-a-project.html#vue-create, aber Edge 18+ unterstützt finally (). Es ist keine Polyfüllung erforderlich, nur für Internet Explorer.
Marc
Ihr Problem kann durch den von Ihnen verwendeten ApiService entstehen, der möglicherweise kein natives Versprechen zurückgibt, sondern ein emuliertes, das selbst erstellt wurde. Versuchen Sie, denselben Anruf mit Axios direkt als Test einzurichten.
Marc