ทำไมสัญญาในที่สุดโครงการ Vue ของฉันไม่ทำงานใน Edge

ฉันมีปัญหาอย่างมากในการทำให้ polyfills ทำงานใน 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"
• "regenerator-runtime": "^ 0.13.3"

อัปเดต 13/02

ดังนั้นฉันจึงพยายามพิมพ์ Promise.prototype บนไซต์ของฉันที่ขอบและมันจะปรากฏว่าเป็น polyfilled:

ดังนั้นตอนนี้ฉันกำลังตรวจสอบว่าบางส่วนของโซ่ (axios / vue axios) ของฉันไม่คืนสัญญา เนื่องจากมันทำงานกับโครเมียมฉันสงสัยว่าส่วนหนึ่งของโซ่ไม่ได้รับการเติมโพลีอย่างถูกต้องหรือไม่?

นี่คือห่วงโซ่ทั้งหมดของฉัน:

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

ฉันเคยประสบปัญหานี้มาก่อน ในที่สุดก็ใช้ไม่ได้กับ 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;

การใช้งานนี้ขึ้นอยู่กับพฤติกรรมของเอกสารในที่สุด ()และขึ้นอยู่กับนั้น ()เป็นไปตามข้อกำหนด:

การโทรกลับในที่สุดจะไม่ได้รับการโต้แย้งใด ๆ เนื่องจากไม่มีวิธีการที่เชื่อถือได้ในการพิจารณาว่าสัญญาได้รับการปฏิบัติตามหรือปฏิเสธ กรณีการใช้งานนี้มีไว้สำหรับเมื่อคุณไม่สนใจเกี่ยวกับเหตุผลการปฏิเสธหรือค่าการปฏิบัติตามดังนั้นจึงไม่จำเป็นต้องระบุ

ต่างจากPromise.resolve(2).then(() => {}, () => {})(ซึ่งจะแก้ไขด้วยไม่ได้กำหนด) Promise.resolve(2).finally(() => {})จะได้รับการแก้ไขด้วย 2

ในทำนองเดียวกันซึ่งแตกต่างจากPromise.reject(3).then(() => {}, () => {})(ซึ่งจะเติมเต็มด้วยไม่ได้กำหนด) Promise.reject(3).finally(() => {}) จะถูกปฏิเสธด้วย 3

หมายเหตุ : การโยน (หรือการส่งคืนสัญญาที่ถูกปฏิเสธ) ในการติดต่อกลับในที่สุดจะปฏิเสธสัญญาใหม่พร้อมเหตุผลการปฏิเสธที่ระบุเมื่อเรียกการโยน ()

นี่เป็นปัญหาที่เป็นที่รู้จักกันในแกน js

ในทางทฤษฎี Edge จะให้คำมั่นสัญญา polyfill ในที่สุด แต่อาจมีบางอย่างเกิดขึ้นกับการตรวจจับคุณสมบัติหรือรายการเบราว์เซอร์ของคุณและคุณต้องระบุ polyfill: ยัก:

ฉันจะลบทั้งปลั๊กอิน Vue babel และ core-js จากโครงการของคุณแล้ว npm ติดตั้งใหม่

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

• npm install core-js --save

ตรวจสอบให้แน่ใจว่าคุณใช้ core-js @ 3 ผ่านทาง config (babel.config.js) ที่นี่

สุดท้ายมีปัญหา Github ไม่กี่พูดคุยเกี่ยวกับสัญญา + polyfills เกี่ยวกับห้องสมุดบุคคลที่สามอื่น ๆ ที่ดำเนินการในร้าน vuex ของคุณ เพิ่มทั้งสามของไลบรารีเหล่านั้น (axios, vue-axios, vuex) ในtranspileDependenciesส่วนของคุณ หากวิธีการนี้แก้ไขได้ให้เริ่มนำการอ้างอิงออกเพื่อดูว่าจำเป็นหรือไม่

ลองเพิ่ม.browserslistrcไฟล์ในรูทโปรเจ็กต์ของคุณด้วยเนื้อหาต่อไปนี้:

> 1%
last 2 versions

ดูhttps://github.com/browserslist/browserslist#best-practicesข้อมูลเกี่ยวกับlast versionsการกำหนดค่า

หากวิธีนี้ไม่สามารถแก้ไขการเติมโพลีที่ขาดหายไปให้ลองปิดการใช้งานปลั๊กอินที่คุณใช้ซึ่ง จำกัด จำนวนชิ้นเพื่อให้แน่ใจว่าสิ่งนี้จะไม่ทำให้เกิดการเติมโพลีใด ๆ

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