घटकों में एक्सिस या HTTP कॉल का उपयोग करने के लिए इसे खराब अभ्यास क्यों माना जाता है?

Question

In this article, यह कहते हैं:

, इसे आम तौर गरीब व्यवहार है, क्योंकि आप Axios सीधे अपने घटकों में एक विधि, जीवन चक्र हुक, या जब भी से डेटा लाने के लिए उपयोग कर सकते हैं।

मुझे आश्चर्य है क्यों? मैं आम तौर पर डेटा लाने के लिए लाइफसाइकिल हुक का उपयोग करता हूं (विशेष रूप से created() से)। हमें अनुरोध कॉल कहां लिखनी चाहिए?

Answer 1

API लिखने के तरीके सीधे घटकों में कोड लाइनों को बढ़ाते हैं और पढ़ने में मुश्किल बनाते हैं। जहां तक ​​मेरा मानना ​​है कि author विधियों को Service में अलग करने का सुझाव दे रहा है।

चलो एक ऐसा मामला लें जहां आपको top posts लाने और डेटा पर काम करना है। यदि आप घटक में ऐसा करते हैं तो यह पुनः उपयोग करने योग्य नहीं है, आपको इसे अन्य घटकों में डुप्लिकेट करना होगा जहां कभी भी आप इसका उपयोग करना चाहते हैं।

export default { 
    data:() => ({ 
    top: [], 
    errors: [] 
    }), 

    // Fetches posts when the component is created. 
    created() { 
    axios.get(`http://jsonplaceholder.typicode.com/posts/top`) 
    .then(response => { 
     // flattening the response 
     this.top = response.data.map(item => { 
     title: item.title, 
     timestamp: item.timestamp, 
     author: item.author 
     }) 
    }) 
    .catch(e => { 
     this.errors.push(e) 
    }) 

    } 
} 

तो जब आप एक और घटक में top post लाने की जरूरत है आप कोड की नकल करने की है।

अब में API methods डालें।

api.js file 

const fetchTopPosts = function() { 
    return axios.get(`http://jsonplaceholder.typicode.com/posts/top`) 
     .then(response => { 
      // flattening the response 
      this.top = response.data.map(item => { 
      title: item.title, 
      timestamp: item.timestamp, 
      author: item.author 
      }) 
     }) // you can also make a chain. 
} 

export default { 
    fetchTopPosts: fetchTopPosts 
} 

तो तुम ऊपर API methods किसी भी घटक तुम चाहो में इस्तेमाल करते हैं।

इस के बाद:

import API from 'path_to_api.js_file' 
export default { 
     data:() => ({ 
     top: [], 
     errors: [] 
     }), 

     // Fetches posts when the component is created. 
     created() { 
     API.fetchTopPosts().then(top => { 
      this.top = top 
     }) 
     .catch(e => { 
      this.errors.push(e) 
     }) 

     } 
    } 

Answer 2

यह छोटे ऐप्स या विजेट के लिए ठीक है, लेकिन वास्तविक एसपीए में, अपने एपीआई को अपने मॉड्यूल में हटाने के लिए बेहतर है, और यदि आप एपीआई मॉड्यूल को कॉल करने के लिए क्रियाओं का उपयोग करने के लिए vuex का उपयोग करते हैं।

आपका घटक जहां अपने डेटा आ रहा है से कैसे और साथ concernered नहीं किया जाना चाहिए। घटक UI के लिए ज़िम्मेदार है, AJAX नहीं।

import api from './api.js' 

created() { 
    api.getUsers().then(users => { 
    this.users = data 
    }) 
} 

// vs. 

created() { 
    axios.get('/users').then({ data }=> { 
    this.users = data 
    }) 
} 

उपरोक्त उदाहरण में, अपने "Axios से मुक्त" कोड वास्तव में बहुत कम नहीं है, लेकिन छवि क्या आप संभावित घटक से बाहर रख सकता है:

• निपटने HTTP त्रुटियों, उदा पुन: प्रयास सर्वर से
• पूर्व स्वरूपण डेटा तो यह आपके घटक
• हैडर विन्यास (सामग्री प्रकार, पहुँच टोकन ...)
• जैसे पोस्ट करने के लिए FormData बनाने फिट बैठता है छवि फ़ाइलें

सूची लंबी हो सकती है। यह सब घटक में शामिल नहीं है क्योंकि इसका दृश्य के साथ कुछ लेना देना नहीं है। दृश्य को केवल परिणामी डेटा या त्रुटि संदेश की आवश्यकता है।

इसका यह भी अर्थ है कि आप अपने घटकों और एपीआई को स्वतंत्र रूप से जांच सकते हैं।