在前端开发中，我们经常需要与服务器进行交互，从而获取数据或者提交数据。在 React Native 中，使用 fetch API 可以完成网络请求。但是，使用原生的 fetch API 进行网络请求需要写很多冗余的代码。为了解决这个问题，我们可以使用 react-native-fetch-http 这个 npm 包来简化网络请求的处理。
什么是 react-native-fetch-http？
react-native-fetch-http 是一个基于 fetch API 封装的 React Native 的网络请求库。它提供了一种简单的方法来进行网络请求，并且支持超时控制、请求头配置、拦截器等功能。
如何安装？
我们可以使用 npm 或者 yarn 来安装 react-native-fetch-http。
# 使用 npm 安装 npm install react-native-fetch-http --save # 使用 yarn 安装 yarn add react-native-fetch-http
如何使用？
使用 react-native-fetch-http 可以极大的简化我们的网络请求处理。下面是一个简单的使用示例：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ----------- ----- ---- - ---- ---------------
------ ---------- ---- --------------------------
------ ------- -------- ----- -
----- ------ -------- - ---------------
----- ------- --------- - ---------------
------------ -- -
----- --------- - ----- -- -- -
--- -
----- ------ - ----- ---------------------------------------------------------------
----------------
- ----- ------- -
----------------
-
--
------------
-- ----
-- ------- -
------ -
----- -------------------------
----------------------------
-------
--
-
-- ------- -
------ -
----- -------------------------
-----------------------
-------
--
-
------ -
----- -------------------------
-----------------------------------
-------
--
-
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
--
---在上面的示例中，我们使用了 httpClient.get 方法来进行一个 GET 请求。这个请求会向 https://jsonplaceholder.typicode.com/todos/1 发送一个请求，并且在请求成功时将返回数据设置为组件的状态，并且在请求失败时将错误信息设置为组件的状态。
有哪些高级用法？
在实际项目开发中，有一些比较高级的用法可能会用得到。下面我们介绍一下这些用法的示例。
请求头配置
import httpClient from 'react-native-fetch-http';
httpClient.setRequestInterceptor(request => {
request.headers.set('Authorization', 'Bearer xxxxxxxx');
return request;
});
const result = await httpClient.get('https://jsonplaceholder.typicode.com/todos/1');在上面的示例中，我们使用了 setRequestInterceptor 方法来配置请求头。这个方法接收一个函数作为参数，这个函数会在每次请求发送之前被调用。在这个函数中，我们可以设置请求头。
超时控制
import httpClient from 'react-native-fetch-http';
const config = {
timeout: 5000
};
const result = await httpClient.get('https://jsonplaceholder.typicode.com/todos/1', config);在上面的示例中，我们使用了一个配置对象来设置超时时间。这个对象会作为 httpClient.get 方法的第二个参数传入。在这个对象中，我们可以设置 timeout 属性来控制请求的超时时间。如果请求超时，这个方法会抛出一个 TimeoutError 错误。
拦截器
-- -------------------- ---- -------
------ ---------- ---- --------------------------
------------------------------------------ -- -
----- ------ - ----------------
-- ------- -- --- -- ------ - ---- -
------ ---------
-
----- --- -------------- ------ ---- ------ ------------
---
----- ------ - ----- ---------------------------------------------------------------在上面的示例中，我们使用了 setResponseInterceptor 方法来设置响应拦截器。这个方法接收一个函数作为参数，这个函数会在每次请求完成之后被调用。在这个函数中，我们可以检查响应的状态码，并且可以根据状态码来判断响应是否成功。如果响应成功，这个函数应该返回响应对象；否则，这个函数可以抛出一个错误对象。
总结
react-native-fetch-http 是一个非常方便的 React Native 网络请求库，可以简化我们的网络请求处理，并且提供一些高级用法来满足我们的项目需求。在实际项目开发中，我们应该学会如何使用这个库，并且应该根据自己的需求来采用适合的高级用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606681e8991b448de857