javascript - Why is promise.finally in my Vue project not working in Edge? - Stack Overflow

admin管理员组

文章数量:1331059

I'm having tremendous trouble getting my polyfills to work in Edge. I've tried to follow the documentation with various attempts all not working. It seems to be promise.finally specifically that isn't working. This happens in a vuex module so I tried adding vuex to transpileDependencies in vue.config but with no luck.

My babel.config.js:

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

In my main.js I have the following two imports in the very top:

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

Note as mentioned above I have tried both with and without the transpileDepedencies. It says here vue/babel-preset-app that es7.promise.finally is included as a default polyfill

Versions:

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

Update 13/02

So I tried to type Promise.prototype on my site in edge and it does appear it is polyfilled:

So currently I'm investigating if some part of my chain (axios/vue axios) does not return a promise. Since it is working in chrome I'm suspecting that a part of the chain is not being polyfilled correctly?

This is my entire chain:

/* VUEX MODULE ACTION */  
[a.ALL_CUSTOMERS](context) {
    contextmit(m.SET_CUSTOMER_LOADING, true);
    CustomerService.getAll()
      .then(({ data }) => {
        contextmit(m.SET_CUSTOMERS, data);
      })
      .finally(() => contextmit(m.SET_CUSTOMER_LOADING, false));
  },

/* CUSTOMER SERVICE */
import ApiService from '@/mon/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.headersmon.Authorization = `Bearer ${getToken()}`;
  },

  get(resource) {
    this.setHeader();
    return Vue.axios.get(`${resource}`);
  },
  ...
}

I'm having tremendous trouble getting my polyfills to work in Edge. I've tried to follow the documentation with various attempts all not working. It seems to be promise.finally specifically that isn't working. This happens in a vuex module so I tried adding vuex to transpileDependencies in vue.config but with no luck.

My babel.config.js:

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

In my main.js I have the following two imports in the very top:

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

Note as mentioned above I have tried both with and without the transpileDepedencies. It says here vue/babel-preset-app that es7.promise.finally is included as a default polyfill

Versions:

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

Update 13/02

So I tried to type Promise.prototype on my site in edge and it does appear it is polyfilled:

So currently I'm investigating if some part of my chain (axios/vue axios) does not return a promise. Since it is working in chrome I'm suspecting that a part of the chain is not being polyfilled correctly?

This is my entire chain:

/* VUEX MODULE ACTION */  
[a.ALL_CUSTOMERS](context) {
    context.mit(m.SET_CUSTOMER_LOADING, true);
    CustomerService.getAll()
      .then(({ data }) => {
        context.mit(m.SET_CUSTOMERS, data);
      })
      .finally(() => context.mit(m.SET_CUSTOMER_LOADING, false));
  },

/* CUSTOMER SERVICE */
import ApiService from '@/mon/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.mon.Authorization = `Bearer ${getToken()}`;
  },

  get(resource) {
    this.setHeader();
    return Vue.axios.get(`${resource}`);
  },
  ...
}

• javascript
• vue.js
• vuejs2
• babeljs
• polyfills

Share Improve this question Follow edited Feb 13, 2020 at 17:08 J.Kirk. asked Jan 28, 2020 at 19:52 J.Kirk.J.Kirk. 97333 gold badges1414 silver badges3434 bronze badges 14

• 3 Interesting, Edge shouldn't need a polyfill because it supports finally() on Promise since v18 – Daniel Commented Jan 28, 2020 at 20:09
• Out of curiosity, what's the EdgeHTML version? You can find it right below where you find the Edge version. I ask because CanIUse bases support off of that. From their site: *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 Commented Jan 28, 2020 at 20:37
• Microsoft EdgeHTML 18.18362 – J.Kirk. Commented Jan 29, 2020 at 8:01
• 2 Edge should tell you that it's a promise. It rather says that it's an object. So the returned object isn't the expected promise. – Mouser Commented Jan 31, 2020 at 14:34
• 2 This question could be improved by providing a boiled down repo reproducing the issue so other people can help. A site like codesandbox.io could be used for this. – Jair Reina Commented Feb 3, 2020 at 23:08

 |  Show 9 more ments

3 Answers 3

Sorted by: Reset to default 1

I have ever faced that issue before. Only finally didn't work on Edge. I updated finally like below VVV and it worked.

This should handle the propagation of the thenable's species in addition to the behaviors detailed below:

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;

This implementation is based on the documented behavior of finally() and depends on then() being pliant to the specification:

A finally callback will not receive any argument, since there's no reliable means of determining if the promise was fulfilled or rejected. This use case is for precisely when you do not care about the rejection reason, or the fulfillment value, and so there's no need to provide it.

Unlike Promise.resolve(2).then(() => {}, () => {}) (which will be resolved with undefined), Promise.resolve(2).finally(() => {}) will be resolved with 2.

Similarly, unlike Promise.reject(3).then(() => {}, () => {}) (which will be fulfilled with undefined), Promise.reject(3).finally(() => {}) will be rejected with 3.

Note: A throw (or returning a rejected promise) in the finally callback will reject the new promise with the rejection reason specified when calling throw().

This is a known issue in core-js.

In theory, Edge provides a Promise polyfill for finally, but perhaps something is going on with the feature detection or your browserlist and you need to provide a polyfill :shrug:

I would delete both the Vue babel plugin and core-js from your project and then npm install them fresh.

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

• npm install core-js --save

Also, make sure you're using core-js@3 via your config (babel.config.js) here

Lastly, there's a few Github issues talking about polyfills + Promises with regards to the other 3rd party libraries executed in your vuex store. Add all three of those libraries (axios, vue-axios, vuex) to your transpileDependencies section. If that fixes it, start removing the dependencies to see if they're needed.

Try adding a .browserslistrc file to your projects root with the following content:

> 1%
last 2 versions

See https://github./browserslist/browserslist#best-practices information on last versions configuration.

---

If this does not resolve missing poly-fill, try disabling the plugin you are using that limits the number of chunks in order to ensure that this is not causing any poly-fills to be omitted.

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

本文标签： javascriptWhy is promisefinally in my Vue project not working in EdgeStack Overflow