왜 약속인가.드디어 엣지에서 일하지 않는 내 Vue 프로젝트에서?

왜 약속인가.드디어 엣지에서 일하지 않는 내 Vue 프로젝트에서?

나는 엣지에서 일하기 위해 폴리필름을 구하는데 엄청난 어려움을 겪고 있다.나는 여러 가지 시도들이 모두 통하지 않고 서류를 따르려고 노력했다.약속인 것 같다.마지막으로, 그것은 작동하지 않는다.vuex 모듈에서 이러한 현상이 발생하므로 vue.config의 transpileDependency에 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'],
};

위에서 언급한 바와 같이 나는 transpileDependencies와 함께 시도했다.여기 vue/babel-preset-app에 다음과 같이 적혀 있다.es7.promise.finally

버전:

• Microsoft Edge: 44.18
• 마이크로소프트 에지HTML 18.18362
• @vue/cli-cli-cli-babel": "^4.1.2"
• "core-js": "^3.6.4"
• "발광기-발광기-발광기": "^0.13"3"

업데이트 13/02

그래서 내 사이트에 Promise.prototype을 엣지로 입력하려고 했는데, polyfilled인 것 같다.

그래서 현재 나는 내 사슬의 일부(axios/vue axios/vue acios)가 약속을 지키지 않는지 조사하고 있다.크롬으로 작동하고 있기 때문에 체인의 일부가 올바르게 폴리 필링되지 않은 것으로 의심된다.

이게 내 체인이야

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

나는 전에 그 문제에 직면해 본 적이 있다.겨우 엣지에서만 효과가 없었어나는 마침내 아래 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으로 부결될 것이다.

참고: 최종 콜백에서 던지기(또는 거절된 약속을 반환)는 던지기()를 부를 때 지정된 거부 이유를 사용하여 새로운 약속을 거부한다.

이것은 core-js에서 알려진 이슈다.

이론적으로, 에지는 마지막으로 Promise polyfill을 제공하지만, 아마도 형상 검출이나 브라우저 목록에 어떤 일이 일어나고 있을 것이고 당신은 폴리필 : shrug:

나는 당신의 프로젝트에서 Vue babel 플러그인과 core-j를 모두 삭제하고 npm에서 새로 설치할 것이다.

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

• npm install core-js --save

또한 여기서 core-js@3을 config(babel.config.js)를 통해 사용하고 있는지 확인하십시오.

마지막으로, 당신의 vuex 매장에서 실행된 다른 제3자 도서관과 관련하여 폴리필즈 + 약속에 대해 이야기하는 몇 가지 Github 문제가 있다.그 세 곳(을 모두 의 세의 라고리(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,
  }),
],

참조URL: https://stackoverflow.com/questions/59956053/why-is-promise-finally-in-my-vue-project-not-working-in-edge