這篇文章給大家分享的是有關(guān)react中支不支持fetch的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的洛浦網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

react中支持fetch，因?yàn)閒etch在reactjs中等同于XMLHttpRequest，它提供了許多與XMLHttpRequest相同的功能，但被設(shè)計(jì)成更具可擴(kuò)展性和高效性。

react與fetch

fetch在reactjs中等同于 XMLHttpRequest，它提供了許多與XMLHttpRequest相同的功能，但被設(shè)計(jì)成更具可擴(kuò)展性和高效性。

Fetch 的核心在于對(duì) HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化異步請(qǐng)求的 global fetch。得益于 JavaScript 實(shí)現(xiàn)的這些抽象好的 HTTP 模塊，其他接口能夠很方便的使用這些功能；除此之外，F(xiàn)etch 還利用到了請(qǐng)求的異步特性——它是基于 Promise 的。

如何在react項(xiàng)目中應(yīng)用fetch呢？

第一步：安裝

用 npm 安裝的話，執(zhí)行cnpm install whatwg-fetch --save即可安裝。

第二步：在實(shí)際項(xiàng)目中的應(yīng)用。

第一種get 使用。

首先要引入依賴的插件，見(jiàn)./app/fetch/test.js中

然后這樣就可以發(fā)起一個(gè) get 請(qǐng)求。

先看我們的./app/index.jsx文件內(nèi)容，他需要引用getData

這里的fetch是引用了插件之后即可用的方法，使用非常簡(jiǎn)單。方法的第一個(gè)參數(shù)是 url 第二個(gè)參數(shù)是配置信息。

fetch 方法請(qǐng)求數(shù)據(jù)，返回的是一個(gè) Promise 對(duì)象。

以上代碼的配置中，credentials: 'include'表示跨域請(qǐng)求是可以帶cookie（fetch 跨域請(qǐng)求時(shí)默認(rèn)不會(huì)帶 cookie，需要時(shí)得手動(dòng)指定

credentials: 'include'。這和 XHR 的 withCredentials 一樣），headers可以設(shè)置 http 請(qǐng)求的頭部信息。

第二種post使用

可以根據(jù)get請(qǐng)求的方法進(jìn)行同理的引用插件，在我們的./app/index.jsx中，我們需要引用

然后用 fetch 發(fā)起一個(gè) post 請(qǐng)求（有method: 'POST'），第一個(gè)參數(shù)是 url，第二個(gè)參數(shù)是配置信息。注意下面配置信息中的headers和

body的格式。fetch 提交數(shù)據(jù)之后，返回的結(jié)果也是一個(gè) Promise 對(duì)象，跟 get 方法一樣。

我們以上兩個(gè)用法中，返回的Promis對(duì)象不一樣，一個(gè)是res.text()，一個(gè)是res.json()。這兩個(gè)方法就是將返回的 Response 數(shù)據(jù)轉(zhuǎn)換成

字符串或者JSON格式，這也是 js 中常用的兩種格式。

接下來(lái)我們要做的事情，其實(shí)是一個(gè)精簡(jiǎn)工作。如果每次獲取數(shù)據(jù)，都向上面一樣寫(xiě)好多代碼，就太冗余了，我們這里將 get 和 post 兩個(gè)方法單獨(dú)抽象出來(lái)。

這兩個(gè)方法抽象之后，接下來(lái)我們?cè)儆茫妥兊孟喈?dāng)簡(jiǎn)單了。

第一步：提取公共部分

getjs部分

postjs提取部分

接下來(lái)看我們的./app/index.jsx文件是如何應(yīng)用的

接下來(lái)運(yùn)行項(xiàng)目即可。

感謝各位的閱讀！關(guān)于react中支不支持fetch就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁(yè)標(biāo)題：react中支不支持fetch-創(chuàng)新互聯(lián)
標(biāo)題來(lái)源：http://www.rwnh.cn/article36/csgppg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)