Vue 프로젝트에서 promise.finally가 Edge에서 작동하지 않는 이유는 무엇입니까?

Polyfill을 Edge에서 작동시키는 데 엄청난 문제가 있습니다. 나는 모든 시도가 작동하지 않는 문서를 따르려고했습니다. 그것은 약속입니다. 마지막으로 작동하지 않는 것 같습니다. 이것은 vuex 모듈 에서 발생 하므로 vue.config의 transpileDependencies에 vuex를 추가하려고했지만 운이 없습니다.

내 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되어 있습니다.

버전 :

• 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을 입력하려고 시도했지만 그것이 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;

이 구현은 finally () 의 문서화 된 동작을 기반으로 하며 스펙을 준수하는 then () 에 의존합니다 .

약속이 이행 또는 거부되었는지 여부를 결정하는 신뢰할 수있는 방법이 없으므로 최종 콜백은 인수를받지 않습니다. 이 사용 사례는 거부 사유 또는 이행 가치에 신경 쓰지 않고 정확하게 제공 할 필요가없는 경우를위한 것입니다.

Promise.resolve(2).then(() => {}, () => {})(정의되지 않은 상태로 해결 될) 와 달리 Promise.resolve(2).finally(() => {})2로 해결됩니다.

마찬가지로 Promise.reject(3).then(() => {}, () => {})(정의되지 않은 상태로 수행 될) 과 달리 Promise.reject(3).finally(() => {}) 3으로 거부됩니다.

참고 : finally 콜백에서 throw (또는 거부 된 약속 반환)는 throw ()를 호출 할 때 지정된 거부 사유로 새 약속을 거부합니다.

이것은 core-js 에서 알려진 문제입니다 .

이론적으로 Edge는 최종적으로 Promise polyfill을 제공하지만 기능 감지 또는 브라우저 목록에 문제가있을 수 있으며 polyfill : 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 스토어에서 실행되는 다른 타사 라이브러리와 관련하여 polyfills + Promises에 관해 이야기하는 몇 가지 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,
  }),
],