Почему в моем Vue проекте обещание не работает в Edge? - PullRequest
Новая
       140

Почему в моем Vue проекте обещание не работает в Edge?

15 голосов
/ 28 января 2020

У меня огромные проблемы с тем, чтобы заставить мои полифилы работать в Edge. Я пытался следить за документацией с различными попытками все не работает. Кажется, это обещание. Наконец, это не работает. Это происходит в модуле vuex , поэтому я попытался добавить vuex к transpileDependencies в vue .config, но безуспешно.

enter image description here

My babel.config. js: 

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

В моем основном. js У меня есть два следующих импорта в самом верху: 

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

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

Обратите внимание, как уже упоминалось выше, я пробовал как с, так и без transpileDepedencies. Здесь говорится vue / babel-preset-app , что es7.promise.finally включен в качестве полизаполнения по умолчанию

Версии:

  • Microsoft Edge: 44.18
  • Microsoft Edge HTML 18.18362
  • @ vue / cli-plugin-babel ":" ^ 4.1.2 "
  • " core- js ":" ^ 3.6.4 "
  • " регенератор-время выполнения ":" ^ 0.13.3 "

Обновление 13/02

Поэтому я попытался ввести Promise .prototype на моем сайте в ребре, и кажется, что он заполнен: here

Так что в настоящее время я изучаю, если какая-то часть моей цепи (axios / vue ax ios) не возвращает обещание. Так как оно работает в chrome Я подозреваю, что часть цепочки неправильно заполняется?

Это вся моя цепочка: 

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

Ответы [ 3 ]

1 голос
/ 06 февраля 2020

Я когда-либо сталкивался с этой проблемой раньше. Только, наконец, не работал на Edge. Наконец, я обновил, как показано ниже, VVV, и это сработало.

Это должно обрабатывать распространение вида в таблице в дополнение к поведению, описанному ниже: 

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;

Эта реализация основан на задокументированном поведении finally () и зависит от того, * then () соответствует спецификации:

Обратный вызов finally не получит никакого аргумент, поскольку нет надежных средств определения того, было ли обещание выполнено или отклонено. Этот вариант использования предназначен именно для случаев, когда вас не заботит причина отклонения или значение выполнения, и поэтому нет необходимости указывать его.

В отличие от Promise.resolve(2).then(() => {}, () => {}) (который будет решен с помощью неопределенного значения), Promise.resolve(2).finally(() => {}) будет разрешено с 2.

Аналогично, в отличие от Promise.reject(3).then(() => {}, () => {}) (который будет выполнен с неопределенным значением), Promise.reject(3).finally(() => {}) будет отклонено с 3.

Примечание : Бросок (или возврат отклоненного обещания) в обратном вызове finally отклонит новое обещание с указанием причины отказа, указанной при вызове throw ().

0 голосов
/ 20 февраля 2020

Попробуйте добавить в свои проекты файл .browserslistrc root со следующим содержимым: 

> 1%
last 2 versions

См. https://github.com/browserslist/browserslist#best -практики информацию о last versions конфигурации.

Если это не устраняет отсутствующее поли-заполнение, попробуйте отключить используемый вами плагин, ограничивающий количество фрагментов, чтобы убедиться, что это не приводит к тому, что никакие поли-заливки не будут пропущены. 

plugins: [
  new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 6,
  }),
],
0 голосов
/ 14 февраля 2020

Это известная проблема в core- js.

Теоретически, Edge предоставляет полифилл Promise для finally, но, возможно, что-то происходит с обнаружением функции или вашим список браузеров, и вам нужно предоставить polyfill: shrug:

Я бы удалил как плагин babel Vue, так и core- js из вашего проекта, а затем npm установил их бесплатно sh.

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

  • npm install core-js --save

Кроме того, убедитесь, что вы используете core-js@3 через ваш конфиг (babel.config. js) здесь

Наконец, есть несколько проблем Github, говорящих о полифиллах + Обещания относительно других сторонних библиотек, выполняемых в вашем vuex хранить. Добавьте все три из этих библиотек (ax ios, vue -ax ios, vuex) в раздел transpileDependencies. Если это исправит это, начните удалять зависимости, чтобы увидеть, нужны ли они.

...