Vueプロジェクトのpromise.finallyがEdgeで機能しないのはなぜですか？

Edgeでポリフィルを機能させるのに非常に苦労しています。私はすべてがうまくいかない様々な試みでドキュメントを追おうとしました。それはpromise.finally具体的には機能していないようです。これはvuexモジュールで発生するため、vue.configの transpileDependenciesにvuexを追加しようとしましたが、うまくいきませんでした。

私のbabel.config.js：

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

私のmain.jsでは、最上部に次の2つのインポートがあります。

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-es7.promise.finally preset -appがここに表示されます

バージョン：

• Microsoft Edge：44.18
• Microsoft EdgeHTML 18.18362
• @ vue / cli-plugin-babel "：" ^ 4.1.2 "
• "core-js"： "^ 3.6.4"
• "再生器ランタイム"： "^ 0.13.3"

13/02更新

だから私はエッジで私のサイトでPromise.prototypeを入力しようとしました、そしてそれはそれがポリフィルされているように見えます：

したがって、現在、チェーンの一部（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以下のようにアップデートしてきました。

これは、以下に詳述する動作に加えて、thenableの種の伝播を処理する必要があります。

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;

この実装は、finally（）の文書化された動作に基づいており、then（）が仕様に準拠していることに依存しています。

約束が履行されたか拒否されたかを判断する確実な手段がないため、finallyコールバックは引数を受け取りません。このユースケースは、拒否の理由やフルフィルメントの値を気にしないので、提供する必要がない場合に適しています。

Promise.resolve(2).then(() => {}, () => {})（未定義で解決される）とは異なりPromise.resolve(2).finally(() => {})、2で解決されます。

同様に、Promise.reject(3).then(() => {}, () => {})（未定義で満たされる）とは異なりPromise.reject(3).finally(() => {}) 、3で拒否されます。

注：finallyコールバックでスロー（または拒否されたプロミスを返す）は、throw（）を呼び出すときに指定された拒否理由で新しいプロミスを拒否します。

これはcore-jsの既知の問題です。

理論的には、Edgeは最終的にPromiseポリフィルを提供しますが、機能検出またはブラウザーリストで何かが起こっているため、ポリフィル：shrugを提供する必要があります。

Vue babelプラグインとcore-jsの両方をプロジェクトから削除し、npmで新規にインストールします。

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

• npm install core-js --save

また、ここで設定（babel.config.js）で core-js @ 3を使用していることを確認してください

最後に、vuexストアで実行される他のサードパーティライブラリに関して、ポリフィル+プロミスについて話しているGithubの問題がいくつかあります。これら3つのライブラリ（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,
  }),
],