Dlaczego promise.finally w moim projekcie Vue nie działa w Edge?

15

Mam ogromne kłopoty z uruchomieniem moich wielopełniaczy w Edge. Próbowałem postępować zgodnie z dokumentacją, ale różne próby nie przyniosły rezultatu. Wydaje się to być obiecujące. Ostatecznie nie działa. Dzieje się tak w module vuex, więc próbowałem dodać vuex do transpileDependencies w vue.config, ale bez powodzenia.

wprowadź opis zdjęcia tutaj

Mój babel.config.js:

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

W mojej main.js mam na górze dwa następujące importy:

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

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

Uwaga: jak wspomniano powyżej, próbowałem zarówno z transpileDepedencies, jak i bez. Mówi się tutaj: vue / babel-preset-app, która es7.promise.finallyjest dołączona jako domyślna polifill

Wersje:

  • Microsoft Edge: 44,18
  • Microsoft EdgeHTML 18.18362
  • @ vue / cli-plugin-babel ":" ^ 4.1.2 "
  • „core-js”: „^ 3.6.4”
  • „regenerator-runtime”: „^ 0,13.3”

Aktualizacja 13/02

Próbowałem więc wpisać Promise.prototype na mojej stronie i wygląda na to, że jest wypełniony: tutaj

Obecnie badam, czy jakaś część mojego łańcucha (axios / vue axios) nie zwraca obietnicy. Skoro działa w chromie, podejrzewam, że część łańcucha nie jest prawidłowo wypełniana wielopunktowo?

To jest cały mój łańcuch:

/* 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.
źródło
3
Ciekawe, że Edge nie powinien potrzebować wypełnienia, ponieważ obsługuje finally()Promise od wersji 18
Daniel
Z ciekawości, jaka jest wersja EdgeHTML? Znajdziesz go poniżej, gdzie znajdziesz wersję Edge. Pytam, ponieważ podstawy CanIUse nie obsługują tego. Z ich strony:*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 powinien powiedzieć, że to obietnica. Mówi raczej, że to obiekt. Tak więc zwrócony obiekt nie jest oczekiwaną obietnicą.
Mouser
2
To pytanie można poprawić, zapewniając gotowe repozytorium odtwarzające problem, aby inni mogli pomóc. Można do tego użyć witryny podobnej do codeandbox.io .
Jair Reina

Odpowiedzi:

1

Wcześniej miałem do czynienia z tym problemem. Dopiero w końcu nie działał na Edge. Zaktualizowałem w końcu jak poniżej VVV i zadziałało.

To powinno obsługiwać Rozkrzewiania thenable za gatunek oprócz zachowań wyszczególnionych poniżej:

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;

Ta implementacja opiera się na udokumentowanym zachowaniu w końcu () i zależy od tego, czy wtedy () będzie zgodna ze specyfikacją:

Ostatecznie wywołanie zwrotne nie otrzyma żadnego argumentu, ponieważ nie ma wiarygodnych sposobów ustalenia, czy obietnica została spełniona, czy odrzucona. Ten przypadek użycia dotyczy właśnie sytuacji, gdy nie zależy Ci na przyczynie odrzucenia lub wartości spełnienia, a więc nie musisz go podawać.

W przeciwieństwie do Promise.resolve(2).then(() => {}, () => {})(który zostanie rozwiązany z niezdefiniowanym), Promise.resolve(2).finally(() => {})zostanie rozwiązany z 2.

Podobnie, w przeciwieństwie do Promise.reject(3).then(() => {}, () => {})(co zostanie spełnione z niezdefiniowanym), Promise.reject(3).finally(() => {}) zostanie odrzucony z 3.

Uwaga : Rzut (lub zwrot odrzuconej obietnicy) w ostatecznym wywołaniu zwrotnym odrzuci nową obietnicę z podanym powodem odrzucenia podczas wywoływania throw ().

Midas Dev
źródło
0

Jest to znany problem w core-js .

Teoretycznie Edge oferuje polietylen Promise na koniec, ale być może coś dzieje się z wykrywaniem funkcji lub listą przeglądarek i musisz podać polifill: wzruszenie ramion:

Chciałbym usunąć zarówno wtyczkę Vue Babel, jak i core-js z twojego projektu, a następnie npm zainstalować je na świeżo.

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

  • npm install core-js --save

Upewnij się także, że używasz core-js @ 3 za pomocą config (babel.config.js) tutaj

Na koniec jest kilka problemów z Githubem mówiących o wypełnieniach + obietnicach w odniesieniu do innych bibliotek stron trzecich wykonanych w twoim sklepie vuex. Dodaj wszystkie trzy z tych bibliotek (axios, vue-axios, vuex) do swojej transpileDependenciessekcji. Jeśli to rozwiąże problem, zacznij usuwać zależności, aby sprawdzić, czy są potrzebne.

Pęto
źródło
Wypróbowałem wszystkie twoje sugestie niestety ten sam wynik :(
J.Kirk.
Dziwne. Czy wtyczka innej firmy usuwa Promise.finally?
Jess
przepraszam za spóźnioną odpowiedź. Jak mogę sprawdzić, czy wtyczka innej firmy go usunęła?
J.Kirk.
0

Spróbuj dodać .browserslistrcplik do katalogu głównego projektów z następującą zawartością:

> 1%
last 2 versions

Zobacz https://github.com/browserslist/browserslist#best-practices informacje na temat last versionskonfiguracji.


Jeśli to nie rozwiąże brakującego wypełnienia, spróbuj wyłączyć używaną wtyczkę, która ogranicza liczbę porcji, aby mieć pewność, że nie spowoduje to pominięcia wypełnień.

plugins: [
  new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 6,
  }),
],
Marc
źródło
Mam już przeglądarkę w przeglądarce z wymienionymi wersjami. Właśnie przetestowany bez wtyczki - nie przyniósł żadnego efektu :(
J.Kirk.
Mój plik wtyczki babel ma tylko: module.exports = {presets: ['@ vue / cli-plugin-babel / preset']}
Marc
a twoja obietnica. ostatecznie działa na krawędzi? Czy istnieje możliwość udostępnienia listy pakietów i konfiguracji, dzięki czemu mogę spróbować odliczyć, który pakiet powoduje problem?
J.Kirk.
Zawsze tworzę moje projekty przy użyciu cli.vuejs.org/guide/creating-a-project.html#vue-create, ale Edge 18+ wreszcie obsługuje (). Nie ma potrzeby wypełniania wielu plików , tylko w Internet Explorerze?
Marc
Twój problem może wynikać z tego, że używasz ApiService, może nie zwracać natywnej obietnicy, ale emulowaną jedną z jej własnych kreacji. Spróbuj skonfigurować to samo połączenie, używając bezpośrednio osi jako testu.
Marc