¿Por qué promesa.finalmente en mi proyecto Vue no funciona en Edge?

Tengo enormes problemas para que mis polyfills funcionen en Edge. He tratado de seguir la documentación con varios intentos, todos no funcionan. Parece ser prometedor. Finalmente, específicamente, eso no está funcionando. Esto sucede en un módulo vuex, así que intenté agregar vuex a transpileDependencies en vue.config pero sin suerte.

Mi babel.config.js:

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

En mi main.js tengo las siguientes dos importaciones en la parte superior:

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

Tenga en cuenta que, como se mencionó anteriormente, he intentado con y sin transpileDepedencies. Aquí dice vue / babel-preset-app que es7.promise.finallyse incluye como un polyfill predeterminado

Versiones

• 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"

Actualización 13/02

Así que intenté escribir Promise.prototype en mi sitio en edge y parece que está lleno de polietileno:

Así que actualmente estoy investigando si alguna parte de mi cadena (axios / vue axios) no devuelve una promesa. Como está funcionando en Chrome, sospecho que una parte de la cadena no se está rellenando correctamente.

Esta es toda mi cadena:

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

Me he enfrentado a ese problema antes. Solo que finalmente no funcionó en Edge. Finalmente actualicé como a continuación VVV y funcionó.

Esto debería manejar la propagación de la thenable de las especies , además de las conductas que se detallan a continuación:

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;

Esta implementación se basa en el comportamiento documentado de finally () y depende de que entonces () cumpla con la especificación:

Una devolución de llamada finalmente no recibirá ningún argumento, ya que no hay medios confiables para determinar si la promesa se cumplió o rechazó. Este caso de uso es precisamente cuando no le importa el motivo del rechazo o el valor de cumplimiento, por lo que no es necesario proporcionarlo.

A diferencia Promise.resolve(2).then(() => {}, () => {})(que se resolverá con indefinido), Promise.resolve(2).finally(() => {})se resolverá con 2.

Del mismo modo, a diferencia de Promise.reject(3).then(() => {}, () => {})(que se cumplirá con indefinido), Promise.reject(3).finally(() => {}) será rechazado con 3.

Nota : Un lanzamiento (o devolver una promesa rechazada) en la devolución de llamada finalmente rechazará la nueva promesa con el motivo de rechazo especificado al llamar a throw ().

Este es un problema conocido en core-js .

En teoría, Edge proporciona un Polyfill de Promise para finalmente, pero quizás algo está sucediendo con la detección de funciones o la lista de su navegador y necesita proporcionar un polyfill: encogimiento de hombros:

Eliminaría tanto el complemento Vue babel como core-js de su proyecto y luego npm los instalaría de nuevo.

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

• npm install core-js --save

Además, asegúrese de estar usando core-js @ 3 a través de su configuración (babel.config.js) aquí

Por último, hay algunos problemas de Github que hablan de polyfills + Promises con respecto a las otras bibliotecas de terceros ejecutadas en su tienda vuex. Agregue las tres bibliotecas (axios, vue-axios, vuex) a su transpileDependenciessección. Si eso lo soluciona, comienza a eliminar las dependencias para ver si son necesarias.

Intente agregar un .browserslistrcarchivo a la raíz de sus proyectos con el siguiente contenido:

> 1%
last 2 versions

Consulte https://github.com/browserslist/browserslist#best-practices información sobre la last versionsconfiguración.

Si esto no resuelve el relleno de polietileno faltante, intente deshabilitar el complemento que está utilizando que limita el número de fragmentos para asegurarse de que esto no esté omitiendo ningún relleno de polietileno.

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