Mengapa janji. Akhirnya dalam proyek Vue saya tidak bekerja di Edge?

Saya mengalami kesulitan luar biasa untuk membuat polyfill saya bekerja di Edge. Saya sudah mencoba mengikuti dokumentasi dengan berbagai upaya yang semuanya tidak berfungsi. Tampaknya itu janji. Akhirnya secara khusus itu tidak berhasil. Ini terjadi dalam modul vuex jadi saya mencoba menambahkan vuex ke transpileDependencies di vue.config tetapi tidak berhasil.

Babel.config.js saya:

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

Di main.js saya, saya memiliki dua impor berikut di bagian paling atas:

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

Vue.config.js saya

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

Catatan seperti yang disebutkan di atas saya telah mencoba keduanya dengan dan tanpa transpileDepedencies. Dikatakan di sini vue / babel-preset-app yang es7.promise.finallydisertakan sebagai polyfill default

Versi:

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

Perbarui 13/02

Jadi saya mencoba mengetik Promise.prototype di situs saya di tepi dan tampaknya itu adalah polyfilled:

Jadi saat ini saya sedang menyelidiki jika beberapa bagian dari rantai saya (axios / vue axios) tidak memberikan janji. Karena ini bekerja di chrome, saya curiga ada bagian rantai yang tidak terisi dengan benar?

Ini seluruh rantai saya:

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

Saya pernah menghadapi masalah itu sebelumnya. Hanya akhirnya tidak berhasil di Edge. Saya akhirnya memperbarui seperti di bawah VVV dan ini berhasil.

Ini harus menangani perbanyakan spesies yang tumbuh di samping perilaku yang dirinci di bawah ini:

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;

Implementasi ini didasarkan pada perilaku yang terdokumentasi dari akhirnya () dan tergantung pada saat itu () yang sesuai dengan spesifikasi:

Akhirnya panggilan balik tidak akan menerima argumen apa pun, karena tidak ada cara yang dapat diandalkan untuk menentukan apakah janji itu dipenuhi atau ditolak. Kasus penggunaan ini tepat ketika Anda tidak peduli tentang alasan penolakan, atau nilai pemenuhan, dan karenanya tidak perlu menyediakannya.

Berbeda dengan Promise.resolve(2).then(() => {}, () => {})(yang akan diselesaikan dengan undefined), Promise.resolve(2).finally(() => {})akan diselesaikan dengan 2.

Demikian pula, tidak seperti Promise.reject(3).then(() => {}, () => {})(yang akan dipenuhi dengan tidak terdefinisi), Promise.reject(3).finally(() => {}) akan ditolak dengan 3.

Catatan : Lemparan (atau mengembalikan janji yang ditolak) di callback akhirnya akan menolak janji baru dengan alasan penolakan yang ditentukan saat memanggil throw ().

Ini adalah masalah yang diketahui di core-js .

Secara teori, Edge menyediakan polyfill Promise untuk akhirnya, tetapi mungkin ada sesuatu yang terjadi dengan deteksi fitur atau daftar browser Anda dan Anda perlu memberikan polyfill: shrug:

Saya akan menghapus kedua plugin Vue babel dan core-js dari proyek Anda dan kemudian menginstalnya npm segar.

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

• npm install core-js --save

Juga, pastikan Anda menggunakan core-js @ 3 melalui config Anda (babel.config.js) di sini

Terakhir, ada beberapa masalah Github berbicara tentang polyfill + Janji sehubungan dengan perpustakaan pihak ke-3 lainnya yang dijalankan di toko vuex Anda. Tambahkan ketiga pustaka tersebut (axios, vue-axios, vuex) ke transpileDependenciesbagian Anda . Jika itu memperbaikinya, mulailah menghapus dependensi untuk melihat apakah mereka diperlukan.

Coba tambahkan .browserslistrcfile ke root proyek Anda dengan konten berikut:

> 1%
last 2 versions

Lihat https://github.com/browserslist/browserslist#best-practices informasi tentang last versionskonfigurasi.

Jika ini tidak menyelesaikan poly-fill yang hilang, coba nonaktifkan plugin yang Anda gunakan yang membatasi jumlah bongkahan untuk memastikan bahwa hal ini tidak menyebabkan semua pengisian-poli dihilangkan.

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