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

15

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.

ingrese la descripción de la imagen aquí

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: aquí

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}`);
  },
  ...
}
J.Kirk.
fuente
3
Interesante, Edge no debería necesitar un polyfill porque es compatible finally()con Promise desde la v18
Daniel
Por curiosidad, ¿cuál es la versión EdgeHTML? Puedes encontrarlo justo debajo de donde encuentras la versión Edge. Pregunto porque CanIUse basa el soporte fuera de eso. Desde su sitio:*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 debería decirte que es una promesa. Más bien dice que es un objeto. Entonces el objeto devuelto no es la promesa esperada.
Mouser
2
Esta pregunta podría mejorarse proporcionando un repositorio resumido que reproduzca el problema para que otras personas puedan ayudar. Un sitio como codesandbox.io podría usarse para esto.
Jair Reina

Respuestas:

1

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

Midas Dev
fuente
0

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.

Encadenar
fuente
Intenté todas sus sugerencias, lamentablemente, el mismo resultado :(
J.Kirk.
Extraño. ¿Un complemento de terceros está eliminando Promise.finally?
Jess
Perdón por la respuesta tardía. ¿Cómo puedo saber si un complemento de terceros lo eliminó?
J. Kirk.
0

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,
  }),
],
Bagazo
fuente
Ya tengo el browserslistrc con las versiones que has enumerado. Acabo de probar sin el complemento - no tuvo ningún efecto :(
J.Kirk.
Mi archivo plugin Babel sólo se tiene: module.exports = {preajustes: [ '@ vue / cli-plugin-babel / preestablecido']}
Marc
y tu promesa.Finalmente funciona en el borde? ¿Hay alguna posibilidad de que pueda compartir su lista de paquetes y configuraciones para que yo pueda tratar de deducir qué paquete causa el problema?
J. Kirk.
Siempre creo mis proyectos usando cli.vuejs.org/guide/creating-a-project.html#vue-create pero Edge 18+ admite finalmente () ¿no hay necesidad de un poli-relleno, solo para Internet Explorer?
Marc
Su problema podría estar surgiendo de ese ApiService que está utilizando, puede que no devuelva una Promesa nativa, sino una emulada de su propia creación. Intente configurar la misma llamada usando axios directamente como prueba.
Marc