वादा क्यों है। मेरे वीयू प्रोजेक्ट में आमतौर पर एज में काम नहीं हो रहा है?

Question

मुझे एज में काम करने के लिए अपने पॉलीफ़िल्स को प्राप्त करने में बहुत परेशानी हो रही है। मैंने विभिन्न प्रयासों के साथ प्रलेखन का पालन करने की कोशिश की है जो सभी काम नहीं कर रहे हैं। यह विशेष रूप से काम नहीं कर रहा है कि विशेष रूप से वादा किया जा रहा है। यह एक vuex मॉड्यूल में होता है इसलिए मैंने vue.config में transpileD dependencies के लिए vuex जोड़ने की कोशिश की, लेकिन कोई भाग्य नहीं।

माई बेबेल.कॉन्फिग.जज:

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

जैसा कि ऊपर उल्लेख किया जा चुका है, मैंने नोट किया है और दोनों के साथ ट्रांसपिडीडिपिडेंसी के बिना। यह यहाँ कहता है कि vue / babel-preset-app जो es7.promise.finallyएक डिफ़ॉल्ट पॉलीफिल के रूप में शामिल है

संस्करण:

• Microsoft एज: 44.18
• Microsoft EdgeHTML 18.18362
• @ vue / cli-plugin-babel ":" ^ 4.1.2 "
• "कोर-जेएस": "^ 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}`);
  },
  ...
}

Comments

दिलचस्प है, एज को पॉलीफ़िल की आवश्यकता नहीं है क्योंकि यह finally()v18 के बाद से वादा पर समर्थन करता है

— डैनियल

जिज्ञासा से बाहर, EdgeHTML संस्करण क्या है? आप इसे वहीं पा सकते हैं, जहां आप एज संस्करण पाते हैं। मैं पूछता हूं क्योंकि CanIUse के ठिकाने समर्थन करते हैं। उनकी साइट से:*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.

— टान्नर

Microsoft EdgeHTML 18.18362

— जे.किर्क।

एज आपको बताना चाहिए कि यह एक वादा है। बल्कि यह कहता है कि यह एक वस्तु है। तो लौटी हुई वस्तु अपेक्षित वादा नहीं है।

— मौसर

इस प्रश्न को एक उबले हुए रेपो को पुन: प्रस्तुत करने से बेहतर बनाया जा सकता है ताकि अन्य लोग मदद कर सकें। इसके लिए codeandbox.io जैसी साइट का इस्तेमाल किया जा सकता है।

— जय रीना

Answer 1

मैंने पहले कभी इस मुद्दे का सामना किया है। केवल अंत में एज पर काम नहीं किया। मैंने आखिरकार वीवीवी की तरह अपडेट किया और यह काम कर गया।

यह नीचे दी गई व्यवहारों के अलावा तत्कालीन प्रजातियों की प्रसार को संभालना चाहिए :

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 के साथ खारिज कर दिया जाएगा।

नोट : अंत में कॉलबैक में एक फेंक (या अस्वीकार किए गए वादे को वापस करना) फेंकने () को कॉल करने पर निर्दिष्ट अस्वीकृति कारण के साथ नए वादे को अस्वीकार कर देगा।

Answer 2

यह कोर-जेएस में एक ज्ञात मुद्दा है ।

सिद्धांत रूप में, एज आखिर के लिए एक वादा पॉलीफ़िल प्रदान करता है, लेकिन शायद कुछ सुविधा का पता लगाने या आपके ब्राउज़र सूची के साथ चल रहा है और आपको पॉलीफ़िल प्रदान करने की आवश्यकता है: श्रग:

मैं आपके प्रोजेक्ट से Vue babel प्लगइन और कोर-js दोनों को डिलीट करूँगा और फिर npm उन्हें नए सिरे से इंस्टॉल करूँगा।

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

• npm install core-js --save

इसके अलावा, सुनिश्चित करें कि आप अपने कॉन्फिगरेशन (babel.config.js) के माध्यम से कोर-ज्स @ 3 का उपयोग कर रहे हैं

अंत में, पॉलीफ़िल्स के बारे में बात करने वाले गिथब के कुछ मुद्दे हैं + आपके vuex स्टोर में निष्पादित अन्य 3 पार्टी पुस्तकालयों के संबंध में वादे। अपने transpileDependenciesअनुभाग में उन सभी पुस्तकालयों (अक्षीय, स्वर-अक्ष, vuex) के तीनों को जोड़ें । यदि वह इसे ठीक करता है, तो निर्भरता को दूर करना शुरू करें कि क्या वे आवश्यक हैं।

Comments

अपने सभी सुझावों को दुर्भाग्य से एक ही परिणाम की कोशिश की :(

— जे। किर्क।

अजीब। क्या एक तृतीय पक्ष प्लगइन Promise.finally को हटा रहा है?

— जेस

देर से उत्तर देने के लिए हमें खेद है। मैं कैसे बता सकता हूं कि किसी तीसरे पक्ष के प्लगइन ने इसे हटा दिया है?

— जे.किर्क

Answer 3

.browserslistrcनिम्नलिखित सामग्री के साथ अपने प्रोजेक्ट रूट में फ़ाइल जोड़ने का प्रयास करें :

> 1%
last 2 versions

Https://github.com/browserslist/browserslist#best-practices जानकारी last versionsकॉन्फ़िगरेशन पर देखें ।

---

यदि यह अनुपलब्ध पॉली-फिल को हल नहीं करता है, तो उस प्लगइन को अक्षम करने का प्रयास करें जो आप उपयोग कर रहे हैं, ताकि यह सुनिश्चित करने के लिए कि यह पॉली-फिल नहीं छोड़ा जा रहा है, ताकि चंक्स की संख्या सीमित हो जाए।

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

Comments

मेरे पास पहले से ही आपके द्वारा सूचीबद्ध संस्करणों के साथ Browserlistrc है। बस प्लगइन के बिना परीक्षण किया - कोई प्रभाव नहीं पड़ा :(

— जे। किर्क।

मेरी बबल प्लगइन फाइल में केवल: मॉड्यूल.एक्सपोर्ट्स = {प्रीसेट्स: ['@ @ वीयू / क्ली-प्लगइन-बैबेल / प्रीसेट']}

— मार्क

और आपका वादा। किसी भी संभावना है कि आप अपनी पैकेज सूची और कॉन्फ़िगरेशन साझा कर सकते हैं ताकि मैं कटौती करने की कोशिश कर सकूं कि कौन सा पैकेज समस्या का कारण बनता है?

— जे.किर्क

मैं हमेशा cli.vuejs.org/guide/creating-a-project.html#vue-create का उपयोग करके अपनी परियोजनाएं बनाता हूं, लेकिन एज 18+ अंत में समर्थन करता है () पॉली-फिल की कोई आवश्यकता नहीं है, केवल इंटरनेट एक्सप्लोरर के लिए?

— मार्क

हो सकता है कि आपका मुद्दा उस ApiService से अंकुरित हो रहा हो जो आप उपयोग कर रहे हैं, हो सकता है कि वह एक देशी वादा नहीं लौटा रहा हो, लेकिन अपनी खुद की एक रचना का अनुकरण कर रहा हो। एक परीक्षण के रूप में सीधे axios का उपयोग करके एक ही कॉल स्थापित करने का प्रयास करें।

— मार्क