Tại sao là lời hứa. Cuối cùng trong dự án Vue của tôi không hoạt động trong Edge?

Tôi đang gặp rắc rối lớn khi các polyfill của tôi hoạt động ở Edge. Tôi đã cố gắng làm theo tài liệu với nhiều nỗ lực khác nhau đều không hoạt động. Nó dường như là lời hứa. Cụ thể là không hoạt động. Điều này xảy ra trong một mô-đun vuex vì vậy tôi đã thử thêm vuex vào transpileDependencies trong vue.config nhưng không gặp may.

Babel.config.js của tôi:

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

Trong tệp main.js của tôi, tôi có hai lần nhập sau ở trên cùng:

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

Vue.config.js của tôi

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

Lưu ý như đã đề cập ở trên, tôi đã thử cả có và không có transpileDepedencies. Nó nói đây vue / babel-cài sẵn ứng dụng mà es7.promise.finallyđược bao gồm như là một polyfill mặc định

Phiên bản:

• Microsoft Edge: 44,18
• Microsoft EdgeHTML 18,18362
• @ vue / cli-plugin-babel ":" ^ 4.1.2 "
• "lõi-js": "^ 3.6.4"
• "trình phục hồi-thời gian chạy": "^ 0.13.3"

Cập nhật 13/02

Vì vậy, tôi đã cố gắng gõ Promise.prototype trên trang web của mình theo cạnh và có vẻ như nó là polyfill:

Vì vậy, hiện tại tôi đang điều tra nếu một phần trong chuỗi của tôi (axios / vue axios) không trả lại lời hứa. Vì nó đang hoạt động trong chrome Tôi nghi ngờ rằng một phần của chuỗi không được điền chính xác?

Đây là toàn bộ chuỗi của tôi:

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

Tôi đã từng phải đối mặt với vấn đề đó trước đây. Cuối cùng chỉ không hoạt động trên Edge. Cuối cùng tôi đã cập nhật như bên dưới VVV và nó đã hoạt động.

Điều này sẽ xử lý việc nhân giống các loài có thể ăn được ngoài các hành vi được nêu chi tiết dưới đây:

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;

Việc triển khai này dựa trên hành vi được ghi lại của cuối cùng () và phụ thuộc vào việc sau đó () tuân thủ đặc tả:

Một cuộc gọi lại cuối cùng sẽ không nhận được bất kỳ đối số nào, vì không có phương tiện đáng tin cậy nào để xác định xem lời hứa đã được thực hiện hay từ chối. Trường hợp sử dụng này là chính xác khi bạn không quan tâm đến lý do từ chối hoặc giá trị thực hiện và do đó không cần phải cung cấp nó.

Không giống như Promise.resolve(2).then(() => {}, () => {})(sẽ được giải quyết với không xác định), Promise.resolve(2).finally(() => {})sẽ được giải quyết bằng 2.

Tương tự, không giống như Promise.reject(3).then(() => {}, () => {})(sẽ được hoàn thành với không xác định), Promise.reject(3).finally(() => {}) sẽ bị từ chối với 3.

Lưu ý : Việc ném (hoặc trả lại lời hứa bị từ chối) trong cuộc gọi lại cuối cùng sẽ từ chối lời hứa mới với lý do từ chối được chỉ định khi gọi throw ().

Đây là một vấn đề được biết đến trong core-js .

Về lý thuyết, Edge cung cấp một polyfill Promise cuối cùng, nhưng có lẽ điều gì đó đang xảy ra với tính năng phát hiện tính năng hoặc danh sách trình duyệt của bạn và bạn cần cung cấp một polyfill: nhún vai:

Tôi sẽ xóa cả plugin Vue babel và core-js khỏi dự án của bạn và sau đó npm cài đặt chúng mới.

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

• npm install core-js --save

Ngoài ra, hãy đảm bảo bạn đang sử dụng core-js @ 3 thông qua cấu hình của bạn (babel.config.js) tại đây

Cuối cùng, có một vài vấn đề Github nói về polyfill + Hứa hẹn liên quan đến các thư viện bên thứ 3 khác được thực thi trong cửa hàng vuex của bạn. Thêm cả ba thư viện đó (axios, vue-axios, vuex) vào transpileDependenciesphần của bạn . Nếu điều đó khắc phục nó, hãy bắt đầu loại bỏ các phụ thuộc để xem chúng có cần thiết không.

Hãy thử thêm một .browserslistrctệp vào gốc dự án của bạn với nội dung sau:

> 1%
last 2 versions

Xem https://github.com/browserslist/browserslist#best-practices thông tin về last versionscấu hình.

Nếu điều này không giải quyết được poly-fill bị thiếu, hãy thử vô hiệu hóa plugin bạn đang sử dụng để giới hạn số lượng khối để đảm bảo rằng điều này không làm cho bất kỳ poly-fill nào bị bỏ qua.

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