मेरा प्रश्न एक प्रतिक्रिया ऐप के अपरिचित व्यवहार के बारे में है। मैंने एपीआई कॉल के लिए वादे लिखे और उन्हें एक फाइल में निर्यात किया क्योंकि कई घटक उनका उपयोग करेंगे। समस्या यह है कि उन निर्यात कॉलों को ऐप लोड पर कॉल करने से पहले ही निष्पादित कर दिया जाता है।

//in commonAPI.js with other exports of similar promises
export var loadDesignationTypes = new Promise(function (resolve, reject) {

    axios.get('http://localhost:7002/commonAPI/getDesignations')
        .then(response => {
            if (response.data.success) {
                var designationObjAr = response.data.resultEmployeeDesignations;
                resolve(designationObjAr);
            }
        }).catch(function (error) {
            console.log("designation err " + error);
            reject(error)
        });
});

अंदर के घटक:

import { loadDesignationTypes, loadDepartmentTypes,
          loadLocationTypes, loadMaritialStatus } from '../../../CommonAPIs';

 //in a function
 const results = await Promise.all([loadDesignationTypes,
            loadDepartmentTypes,loadLocationTypes, loadMaritialStatus]);

जो मुझे और भी अधिक भ्रमित करता है वह यह है कि अन्य वादे निर्यात जिन्हें आंतरिक घटक नहीं कहा जाता है, जो एक ही फाइल में रहते हैं जिन्हें वादा कहा जाता है, उन्हें भी निष्पादित किया जाता है।

1
hashan.abeysinghe 12 अक्टूबर 2018, 08:34

1 उत्तर

सबसे बढ़िया उत्तर

मॉड्यूल वर्तमान में new Promise(.. ब्लॉक सिंक्रोनस रूप से चला रहा है, जब मॉड्यूल का कोड चलाया जाता है, जबकि दुभाषिया यह पता लगाने की कोशिश कर रहा है कि प्रत्येक मॉड्यूल क्या आयात और निर्यात करता है। यदि आप चाहते हैं कि axios.get मांग पर चले, तो स्वचालित रूप से नहीं, आपको एक फ़ंक्शन निर्यात करना चाहिए जो कॉल किए जाने पर एक सादे Promise के बजाय एक Promise बनाता है। .

आपको यह भी ध्यान रखना चाहिए कि स्पष्ट प्रॉमिस कंस्ट्रक्शन एंटीपैटर्न - इसके बजाय केवल Promise चेन लौटाएं:

export var loadDesignationTypes = () => axios.get('http://localhost:7002/commonAPI/getDesignations')
  .then(response => {
    if (response.data.success) {
      return response.data.resultEmployeeDesignations;
    }
    // if not successful, you probably want to throw an error:
    throw new Error('Not successful');
  }).catch(function (error) {
    // If this console.log statement isn't necessary,
    // better to leave the catch out entirely
    // and leave error handling to the consumer
    console.log("designation err " + error);
    throw error;
  });

फिर, उपभोग करने वाले मॉड्यूल में, Promise.all के साथ फ़ंक्शन का उपयोग करते समय उसे कॉल करें:

const results = await Promise.all([
  loadDesignationTypes(),
  // etc
2
CertainPerformance 12 अक्टूबर 2018, 05:42