react中支不支持fetch-創(chuàng)新互聯(lián)

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

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

react中支持fetch,因為fetch在reactjs中等同于XMLHttpRequest,它提供了許多與XMLHttpRequest相同的功能,但被設(shè)計成更具可擴展性和高效性。

react與fetch

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

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

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

第一步:安裝

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

react中支不支持fetch

第二步:在實際項目中的應(yīng)用。

第一種get 使用。

首先要引入依賴的插件,見./app/fetch/test.js中

react中支不支持fetch

然后這樣就可以發(fā)起一個 get 請求。

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

react中支不支持fetch

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

fetch 方法請求數(shù)據(jù),返回的是一個 Promise 對象。

react中支不支持fetch

以上代碼的配置中,credentials: 'include'表示跨域請求是可以帶cookie(fetch 跨域請求時默認不會帶 cookie,需要時得手動指定

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

第二種post使用

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

react中支不支持fetch

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

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

react中支不支持fetch

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

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

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

這兩個方法抽象之后,接下來我們再用,就變得相當簡單了。

第一步:提取公共部分

react中支不支持fetch

getjs部分

react中支不支持fetch

postjs提取部分

react中支不支持fetch

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

react中支不支持fetch

接下來運行項目即可。

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

網(wǎng)頁標題:react中支不支持fetch-創(chuàng)新互聯(lián)
標題來源:http://muchs.cn/article36/csgppg.html

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

廣告

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

綿陽服務(wù)器托管