react中支不支持fetch

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

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

react與fetch

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

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

如何在react項目中應用fetch呢？

第一步：安裝

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

第二步：在實際項目中的應用。

第一種get 使用。

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

然后這樣就可以發起一個 get 請求。

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

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

fetch 方法請求數據，返回的是一個 Promise 對象。

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

credentials: 'include'。這和 XHR 的 withCredentials 一樣），headers可以設置 http 請求的頭部信息。

第二種post使用

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

然后用 fetch 發起一個 post 請求（有method: 'POST'），第一個參數是 url，第二個參數是配置信息。注意下面配置信息中的headers和

body的格式。fetch 提交數據之后，返回的結果也是一個 Promise 對象，跟 get 方法一樣。

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

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

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

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

第一步：提取公共部分

getjs部分

postjs提取部分

接下來看我們的./app/index.jsx文件是如何應用的

接下來運行項目即可。

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