javascript - काम नहीं करने के लिए स्थानीय फ़ाइल के लिए अनुरोध प्राप्त करें




reactjs fetch-api (3)

मैं एक स्थानीय फ़ाइल में एक अनुरोध करने की कोशिश कर रहा हूं, लेकिन मुझे नहीं पता कि जब मैं अपने कंप्यूटर पर करने की कोशिश करता हूं तो मुझे एक त्रुटि दिखाई देती है। क्या आपकी परियोजना के अंदर एक फाइल बनाना संभव है?

 // Option 1
 componentDidMount() {
     fetch('./movies.json')
     .then(res => res.json())
     .then((data) => {
        console.log(data)
     });
 }

 error: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at App.js: 10 -->  .then(res => res.json())

 // Option 2
 componentDidMount() {
    fetch('./movies.json', {
       headers : { 
         'Content-Type': 'application/json',
         'Accept': 'application/json'
       }
    })
   .then( res => res.json())
   .then((data) => {
        console.log(data);
   });
 }

 error1: GET http://localhost:3000/movies.json 404 (Not Found) at App.js:15 --> fetch('./movies.json', {
 error2: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at App.js: 10 -->  .then(res => res.json())


 // This works
 componentDidMount() {
   fetch('https://facebook.github.io/react-native/movies.json')
   .then( res => res.json() )
   .then( (data) => {
      console.log(data)
   })
 }

अपने json फ़ाइल को सार्वजनिक फ़ोल्डर में रखने की कोशिश करें जैसे:

सार्वजनिक / movies.json

और फिर उपयोग करके लाएं

fetch('./movies.json')

या

fetch('movies.json')

मैंने पहले भी यही समस्या अनुभव की है। जब मैं json फ़ाइल को सार्वजनिक फ़ोल्डर में रखता हूं, तो समस्या हल हो जाती है। फ़ेच का उपयोग करते समय, प्रतिक्रिया सामान्य रूप से सार्वजनिक फ़ोल्डर में संपत्ति / संसाधन फ़ाइलों को पढ़ती है।


आप एक स्थिर कमांड को लाने के लिए कोशिश कर रहे हैं, जिसमें स्वाभाविक रूप से फाइल को सर्वर द्वारा सेवित होना आवश्यक है। समस्या को हल करने के लिए, आपके पास कुछ विकल्प उपलब्ध हैं। मैं उन दोनों को रेखांकित करने जा रहा हूं जो आमतौर पर इस तरह की चीज के लिए सुझाए जाते हैं:

  • अपने स्वयं के सर्वर को होस्ट करने के लिए Node.js और expressjs जैसे कुछ का उपयोग करें जो आपको लाने के लिए फ़ाइल की सेवा करता है। हालांकि इस प्रक्रिया में अधिक प्रयास और समय की आवश्यकता हो सकती है, यह निश्चित रूप से अधिक अनुकूलन योग्य है और सीखने और समझने का एक अच्छा तरीका है कि बैकएंड कैसे काम करता है।
  • Chrome वेब सर्वर जैसी किसी चीज़ का उपयोग अपने स्थानीय नेटवर्क पर अपनी फ़ाइल की सेवा के लिए एक बहुत ही सरल सर्वर को आसानी से सेट करने के लिए करें। इस पद्धति का उपयोग करके, आपके पास उक्त वेब सर्वर के साथ जो आप कर सकते हैं उस पर बहुत कम नियंत्रण है, लेकिन आप अपने वेब एप्लिकेशन को जल्दी और आसानी से प्रोटोटाइप कर सकते हैं। हालांकि, मुझे संदेह है कि इस विधि को उत्पादन में स्थानांतरित करने का एक तरीका है।

अंत में, अन्य विकल्प हैं जहां आप एक या एक से अधिक फ़ाइलों को ऑनलाइन अपलोड कर सकते हैं और उन्हें बाहरी URL से प्राप्त कर सकते हैं, हालांकि यह इष्टतम रणनीति नहीं हो सकती है।


मेरा गो-टू express-generator अप एक त्वरित स्थानीय सर्वर सेट करने के लिए express-generator का उपयोग करना है, फिर ngrok (फ्री टियर ठीक है) ngrok और अपने ऐप को इसे बनाने वाले यूआरएल को इंगित करें। इससे आपको आईओएस सिम्युलेटर या एंड्रॉइड एमुलेटर में आसानी से अपने भ्रूण का परीक्षण करने की सुविधा मिलती है, साथ ही साथ आपके कंप्यूटर पर डिवाइस नहीं है। साथ ही, आप अपने ऐप का परीक्षण करने वाले लोगों को url भी भेज सकते हैं। बेशक, मैन्युअल रूप से इनपुट करने के लिए उनके लिए एक रास्ता बनाने की आवश्यकता होगी जो url हो ताकि ऐप इसे भ्रूण के समापन बिंदु के रूप में सेट कर सके।





fetch-api