2016-09-19 12 views
10

मुझे पता है कि नई लायें एपीआई के साथ आप इस तरह GET अनुरोध कर सकते हैं (ES2017 के async/await साथ यहां इस्तेमाल किया):पोस्ट एपीआई के साथ POST अनुरोध?

async getData() { 
    try { 
     let response = await fetch('https://example.com/api'); 
     let responseJson = await response.json(); 
     console.log(responseJson); 
    } catch(error) { 
     console.error(error); 
    } 
} 

लेकिन यह कैसे आप एक पोस्ट अनुरोध कर सकता हूँ?

+2

आप दो अलग बातें conflating रहे हैं: जावास्क्रिप्ट की आगामी 'async' /' await', और (पूरी तरह से अलग) [एपीआई लायें] (https://fetch.spec.whatwg.org/)। आपके प्रश्न के पास जावास्क्रिप्ट के 'async'/'await' के साथ कुछ लेना देना नहीं है, यह' fetch' के बारे में है। (यह भी ध्यान रखें कि नया Fetch API बिल्कुल नया है, और इसलिए [समर्थन अत्याधुनिक ब्राउज़रों तक सीमित है] (http://caniuse.com/#feat=fetch)।) –

+0

@ jfriend00: मैंने इसे किया उन्हें। –

उत्तर

23

लंबी कहानी संक्षेप में, लायें भी आप एक वस्तु एक और अधिक व्यक्तिगत अनुरोध के लिए पारित करने के लिए अनुमति देता है: बाहर प्रलेखन लाने और भी उपहार और gotchas के लिए

fetch("http://example.com/api/endpoint/", { 
    method: "post", 
    headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json' 
    }, 

    //make sure to serialize your JSON body 
    body: JSON.stringify({ 
    name: myName, 
    password: myPassword 
    }) 
}) 
.then((response) => { 
    //do something awesome that makes the world a better place 
}); 

की जांच:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

कृपया ध्यान दें कि चूंकि आप एसिंक कोशिश/पकड़ पैटर्न कर रहे हैं, इसलिए आप मेरे उदाहरण में then() फ़ंक्शन को छोड़ देंगे;)

4

यदि आप जेएसओएन के रूप में डेटा भेजने के बिना सरल पोस्ट अनुरोध करना चाहते हैं।

fetch("/url-to-post",{ 
     method: "POST", 
     //what ever data you want to post with key value pair   
     body: "name=manas&age=20", 
     headers: { 
      "Content-Type": "application/x-www-form-urlencoded" 
     }).then((response) => { 
     //do something awesome that makes the world a better place 
}); 
संबंधित मुद्दे