1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| 在 React Native 中，进行网络请求常用的方式是通过 fetch 或 Axios。它们都可以用来发送 HTTP 请求（如 GET、POST 等），并处理响应。
一、使用 fetch 进行网络请求
fetch 是浏览器原生的 API，也被 React Native 内置支持，使用起来非常简单。
示例：使用 fetch
fetch('https://api.example.com/data')
.then(response => response.json()) // 解析响应为 JSON
.then(data => console.log(data)) // 处理成功的返回数据
.catch(error => console.error('错误:', error)); // 错误处理
特点：
-内置在 React Native 中，无需安装额外依赖。
-需要手动处理响应的状态码（如 404、500 等）和错误。
-默认返回的是一个 Promise，需要使用 .then() 或 async/await 来处理异步操作。
-对于 POST 请求，需要手动设置请求头和请求体。
POST 请求示例：
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ key: 'value' }), // 请求体
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('错误:', error));
二、使用 Axios 进行网络请求
Axios 是一个基于 Promise 的 HTTP 客户端库，适用于浏览器和 Node.js。
它提供了比 fetch 更为强大的功能，特别是在处理请求和响应时。
示例：使用 Axios
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => console.log(response.data)) // 处理成功的返回数据
.catch(error => console.error('错误:', error)); // 错误处理
特点：
-需要额外安装：npm install axios。
-自动解析响应数据为 JSON，避免了 fetch 中手动调用 .json() 的步骤。
-可以全局设置请求头、超时、请求拦截器、响应拦截器等，提供更灵活的配置。
-支持取消请求，适合处理复杂的请求场景。
POST 请求示例：
axios.post('https://api.example.com/data', {
key: 'value',
})
.then(response => console.log(response.data))
.catch(error => console.error('错误:', error));
总结：
-fetch 是内置的，简单直接，适合简单的网络请求。缺点是需要手动处理错误和响应解析。
-Axios 提供了更多功能，如请求拦截器、自动解析 JSON、请求取消等，适合复杂的请求场景。
|