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

15

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.

masukkan deskripsi gambar di sini

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: sini

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}`);
  },
  ...
}
J.Kirk.
sumber
3
Menarik, Edge tidak perlu membutuhkan polyfill karena mendukung finally()pada Promise sejak v18
Daniel
Karena penasaran, apa versi EdgeHTML? Anda dapat menemukannya tepat di bawah tempat Anda menemukan versi Edge. Saya bertanya karena CanIUse mendukungnya. Dari situs mereka:*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
Microsoft EdgeHTML 18.18362
J.Kirk.
2
Edge harus memberi tahu Anda bahwa itu adalah janji. Lebih tepatnya dikatakan bahwa itu adalah objek. Jadi objek yang dikembalikan bukan janji yang diharapkan.
Mouser
2
Pertanyaan ini dapat diperbaiki dengan menyediakan repo rebus mereproduksi masalah sehingga orang lain dapat membantu. Situs seperti codesandbox.io dapat digunakan untuk ini.
Jair Reina

Jawaban:

1

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 ().

Midas Dev
sumber
0

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.

Jess
sumber
Mencoba semua saran Anda sayangnya hasil yang sama :(
J.Kirk.
Aneh. Apakah plugin pihak ketiga menghapus Promise. Akhirnya?
Jess
Maaf atas jawaban yang terlambat. Bagaimana saya bisa tahu jika plugin pihak ketiga menghapusnya?
J.Kirk.
0

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,
  }),
],
Marc
sumber
Saya sudah memiliki browserslistrc dengan versi yang telah Anda daftarkan. Hanya diuji tanpa plugin - tidak berpengaruh :(
J.Kirk.
File plugin babel saya hanya memiliki: module.exports = {preset: ['@ vue / cli-plugin-babel / preset']}
Marc
dan janji Anda. Akhirnya bekerja di tepi? Adakah kemungkinan Anda dapat membagikan daftar paket dan konfigurasi Anda sehingga saya dapat mencoba mengurangi paket mana yang menyebabkan masalah?
J.Kirk.
Saya selalu membuat proyek saya menggunakan cli.vuejs.org/guide/creating-a-project.html#vue-create tetapi Edge 18+ akhirnya mendukung () tidak perlu untuk isi-poli, hanya untuk Internet Explorer?
Marc
Masalah Anda mungkin muncul dari ApiService yang Anda gunakan itu mungkin bukan mengembalikan Janji asli tetapi yang ditiru dari ciptaannya sendiri. Cobalah mengatur panggilan yang sama menggunakan aksioma langsung sebagai tes.
Marc