Почему в моем проекте Vue не работает Challenge.finally?

15

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

введите описание изображения здесь

Мой babel.config.js:

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

В моем main.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которое включено в качестве polyfill по умолчанию

Версии:

  • Microsoft Edge: 44,18
  • Microsoft EdgeHTML 18.18362
  • @ vue / cli-plugin-babel ":" ^ 4.1.2 "
  • "core-js": "^ 3.6.4"
  • "время регенерации": "^ 0.13.3"

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

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

Поэтому в настоящее время я расследую, не возвращает ли какая-то часть моей цепочки (axios / vue axios) обещание. Так как он работает в 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}`);
  },
  ...
}
J.Kirk.
источник
3
Интересно, что Edge не должен нуждаться в polyfill, потому что он поддерживает finally()Promise начиная с v18
Даниэль
Из любопытства, какова версия EdgeHTML? Вы можете найти его прямо ниже, где вы найдете версию Edge. Я спрашиваю, потому что базы CanIUse поддерживают от этого. С их сайта:*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.
Таннер
Microsoft EdgeHTML 18.18362
J.Kirk.
2
Край должен сказать вам, что это обещание. Это скорее говорит о том, что это объект. Таким образом, возвращаемый объект не является ожидаемым обещанием.
Мышелов
2
Этот вопрос может быть улучшен, если предоставить репо с репродукцией проблемы, чтобы другие люди могли помочь. Для этого можно использовать такой сайт, как codesandbox.io .
Джейр Рейна

Ответы:

1

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

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

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 () спецификации:

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

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

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

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

Midas Dev
источник
0

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

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

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

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

  • npm install core-js --save

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

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

Джесс
источник
Перепробовал все ваши предложения, к сожалению, тот же результат :(
J.Kirk.
Weird. Сторонний плагин удаляет Promise.finally?
Джесс
Извини за поздний ответ. Как я могу узнать, что сторонний плагин удалил его?
Дж. Кирк.
0

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

> 1%
last 2 versions

Видеть Https://github.com/browserslist/browserslist#best-practices информацию о last versionsконфигурации.


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

plugins: [
  new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 6,
  }),
],
Марк
источник
У меня уже есть список браузеров с версиями, которые вы перечислили. Только что протестировал без плагина - ничего не дало :(
J.Kirk.
Мой файл плагин столпотворение только имеет: module.exports = {пресеты: [ '@ вю / кли-плагин-столпотворение / предустановка']}
Marc
а ваше обещание. в крайнем случае работает? Любая возможность, вы можете поделиться своим списком пакетов и конфигураций, чтобы я мог попытаться определить, какой пакет вызывает проблему?
Дж. Кирк.
Я всегда создаю свои проекты, используя cli.vuejs.org/guide/creating-a-project.html#vue-create, но Edge 18+ поддерживает finally () нет необходимости в полизаполнении, только для Internet Explorer?
Марк
Возможно, ваша проблема проистекает из того, что ApiService, который вы используете, может не возвращать нативное обещание, а эмулировать его собственное создание. Попробуйте настроить тот же вызов, используя axios напрямую в качестве теста.
Марк