React Native 全栈开发实战班 - 网络与数据之网络请求基础

devtools/2024/11/18 1:36:40/

在移动应用中，网络请求 是实现与服务器进行数据交互的核心功能。React Native 基于 JavaScript 的特性，提供了多种方式进行网络请求，包括使用 fetch API、axios 库以及 WebSocket 等。本章节将详细介绍如何在 React Native 中进行网络请求，包括基本用法、错误处理、请求拦截以及使用第三方库进行更复杂的网络操作。

1.1 网络请求概述

在 React Native 应用中，网络请求主要用于以下场景：

  • 数据获取： 从服务器获取数据，如用户信息、文章列表等。
  • 数据提交： 向服务器提交数据，如用户注册、登录、发布文章等。
  • 实时通信： 通过 WebSocket 实现实时数据推送，如聊天应用、实时通知等。

React Native 提供了多种方式进行网络请求：

  1. fetch API： 内置于 JavaScript 的网络请求 API，简单易用。
  2. axios 库： 第三方网络请求库，功能更强大，支持拦截器、取消请求等。
  3. WebSocket： 用于实现实时双向通信。

本章节将重点介绍 fetch API 和 axios 库的使用。

1.2 使用 fetch API

fetch 是 JavaScript 提供的一个用于进行网络请求的 API，React Native 对其进行了支持。

1.2.1 基本用法

语法：

fetch(url, {method: 'GET', // 请求方法：GET, POST, PUT, DELETE, etc.headers: {'Content-Type': 'application/json',// 其他头部信息},body: JSON.stringify(data), // 请求体
}).then((response) => response.json()).then((json) => {// 处理响应数据}).catch((error) => {// 处理错误});

示例：GET 请求

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';const DataFetcher = () => {const [data, setData] = useState(null);useEffect(() => {fetch('https://jsonplaceholder.typicode.com/posts/1').then((response) => response.json()).then((json) => setData(json)).catch((error) => console.error(error));}, []);return (<View style={styles.container}>{data ? (<Text style={styles.text}>{JSON.stringify(data)}</Text>) : (<Text>Loading...</Text>)}</View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},text: {fontSize: 16,},
});export default DataFetcher;

示例：POST 请求

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';const DataPoster = () => {const [response, setResponse] = useState(null);const postData = () => {const data = { title: 'foo', body: 'bar', userId: 1 };fetch('https://jsonplaceholder.typicode.com/posts', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify(data),}).then((response) => response.json()).then((json) => setResponse(json)).catch((error) => console.error(error));};return (<View style={styles.container}><Button title="Post Data" onPress={postData} />{response && <Text style={styles.text}>{JSON.stringify(response)}</Text>}</View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},text: {fontSize: 16,marginTop: 10,},
});export default DataPoster;
1.2.2 错误处理

在网络请求中，错误处理是非常重要的。可以通过 catch 捕获错误，并进行相应的处理。

示例：

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';const ErrorHandlingExample = () => {const [error, setError] = useState(null);useEffect(() => {fetch('https://invalid-url.com/data').then((response) => response.json()).then((json) => {// 处理数据}).catch((error) => {console.error(error);setError('网络请求失败');});}, []);return (<View style={styles.container}>{error && <Text style={styles.text}>{error}</Text>}</View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},text: {fontSize: 16,color: 'red',},
});export default ErrorHandlingExample;
1.2.3 请求拦截

fetch 本身不支持请求拦截，但可以通过封装 fetch 函数来实现。

示例：

// api.js
import { Platform } from 'react-native';const api = {get: (url, headers = {}) => {return fetch(url, {method: 'GET',headers: {'Content-Type': 'application/json',...headers,},});},post: (url, data, headers = {}) => {return fetch(url, {method: 'POST',headers: {'Content-Type': 'application/json',...headers,},body: JSON.stringify(data),});},// 其他方法：put, delete, etc.
};// 添加请求拦截器
api.interceptors = {request: {use: (callback) => {const originalGet = api.get;api.get = (url, headers) => {return callback(originalGet(url, headers));};const originalPost = api.post;api.post = (url, data, headers) => {return callback(originalPost(url, data, headers));};// 其他方法},},
};export default api;

// App.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import api from './api';api.interceptors.request.use((originalFetch) => (...args) => {// 添加请求头const [url, options] = args;options.headers = {...options.headers,Authorization: 'Bearer token',};return originalFetch(url, options);
});const App = () => {const fetchData = async () => {try {const response = await api.get('https://jsonplaceholder.typicode.com/posts/1');const json = await response.json();console.log(json);} catch (error) {console.error(error);}};return (<View style={styles.container}><Text style={styles.text}>Fetch Data</Text><Button title="Get Data" onPress={fetchData} /></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},text: {fontSize: 18,},
});export default App;
1.3 使用 axios 库

axios 是一个第三方网络请求库，功能更强大，支持拦截器、取消请求、请求超时等。相比 fetch，axios 提供了更简洁的 API 和更丰富的功能。

1.3.1 安装 axios
npm install axios
1.3.2 基本用法

以下是一个使用 axios 发送 POST 请求的示例：

// components/PostData.js
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet, ActivityIndicator } from 'react-native';
import axios from 'axios';const PostData = () => {const [response, setResponse] = useState(null);const [loading, setLoading] = useState(false);const handlePost = async () => {setLoading(true);try {const data = { title: 'foo', body: 'bar', userId: 1 };const res = await axios.post('https://jsonplaceholder.typicode.com/posts', data);setResponse(res.data);} catch (error) {console.error(error);alert('请求失败');} finally {setLoading(false);}};return (<View style={styles.container}><Button title="Post Data" onPress={handlePost} />{loading && <ActivityIndicator size="large" color="#0000ff" />}{response && (<View style={styles.responseContainer}><Text style={styles.responseText}>Response:</Text><Text>{JSON.stringify(response)}</Text></View>)}</View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',padding: 20,},responseContainer: {marginTop: 20,padding: 10,backgroundColor: '#f0f0f0',borderRadius: 5,},responseText: {fontSize: 16,fontWeight: 'bold',marginBottom: 5,},
});export default PostData;

解释：

  • 发送 POST 请求：

    • 使用 axios.post 方法发送 POST 请求，第一个参数是请求的 URL，第二个参数是请求体数据。
    • axios.post 返回一个 Promise，可以通过 then 和 catch 处理响应和错误。

  • 错误处理：

    • 使用 try...catch 捕获请求错误，并进行相应处理（如显示错误提示）。

  • 加载状态：

    • 使用 loading 状态控制 ActivityIndicator 的显示，提示用户请求正在进行中。

  • 显示响应数据：

    • 将响应数据存储在 response 状态中，并在界面上显示。
1.3.3 拦截器

axios 提供了请求拦截器和响应拦截器，可以在请求发送前和响应返回后进行统一处理。

示例：添加请求头和响应处理

// api.js
import axios from 'axios';// 创建 axios 实例
const api = axios.create({baseURL: 'https://jsonplaceholder.typicode.com',
});// 添加请求拦截器
api.interceptors.request.use((config) => {// 在发送请求之前做些什么config.headers['Authorization'] = 'Bearer token';return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);// 添加响应拦截器
api.interceptors.response.use((response) => {// 对响应数据做点什么return response;},(error) => {// 对响应错误做点什么return Promise.reject(error);}
);export default api;

// components/PostData.js
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet, ActivityIndicator } from 'react-native';
import api from '../api';const PostData = () => {const [response, setResponse] = useState(null);const [loading, setLoading] = useState(false);const handlePost = async () => {setLoading(true);try {const data = { title: 'foo', body: 'bar', userId: 1 };const res = await api.post('/posts', data);setResponse(res.data);} catch (error) {console.error(error);alert('请求失败');} finally {setLoading(false);}};return (<View style={styles.container}><Button title="Post Data" onPress={handlePost} />{loading && <ActivityIndicator size="large" color="#0000ff" />}{response && (<View style={styles.responseContainer}><Text style={styles.responseText}>Response:</Text><Text>{JSON.stringify(response)}</Text></View>)}</View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',padding: 20,},responseContainer: {marginTop: 20,padding: 10,backgroundColor: '#f0f0f0',borderRadius: 5,},responseText: {fontSize: 16,fontWeight: 'bold',marginBottom: 5,},
});export default PostData;

解释：

  • 创建 axios 实例：

    • 使用 axios.create 创建一个 axios 实例，并设置 baseURL。

  • 请求拦截器：

    • 在请求发送前添加 Authorization 请求头。

  • 响应拦截器：

    • 在响应返回后进行统一处理，例如处理错误码、格式化数据等。

  • 使用 axios 实例：

    • 在组件中使用 api.post 发送请求，无需重复添加请求头。
1.3.4 取消请求

axios 支持取消请求，可以通过 CancelToken 实现。

示例：

// components/CancelablePost.js
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet, ActivityIndicator } from 'react-native';
import axios from 'axios';const CancelablePost = () => {const [response, setResponse] = useState(null);const [loading, setLoading] = useState(false);let cancelToken;const handlePost = async () => {setLoading(true);cancelToken = axios.CancelToken.source();try {const data = { title: 'foo', body: 'bar', userId: 1 };const res = await axios.post('https://jsonplaceholder.typicode.com/posts', data, {cancelToken: cancelToken.token,});setResponse(res.data);} catch (error) {if (axios.isCancel(error)) {console.log('请求取消');} else {console.error(error);alert('请求失败');}} finally {setLoading(false);}};const handleCancel = () => {if (cancelToken) {cancelToken.cancel('用户取消请求');}};return (<View style={styles.container}><Button title="Post Data" onPress={handlePost} /><Button title="Cancel Request" onPress={handleCancel} />{loading && <ActivityIndicator size="large" color="#0000ff" />}{response && (<View style={styles.responseContainer}><Text style={styles.responseText}>Response:</Text><Text>{JSON.stringify(response)}</Text></View>)}</View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',padding: 20,},responseContainer: {marginTop: 20,padding: 10,backgroundColor: '#f0f0f0',borderRadius: 5,},responseText: {fontSize: 16,fontWeight: 'bold',marginBottom: 5,},
});export default CancelablePost;

解释：

  • 取消请求：
    • 使用 CancelToken.source() 创建一个取消令牌。
    • 在发送请求时，将取消令牌传递给 axios.post。
    • 通过调用 cancelToken.cancel('用户取消请求') 可以取消请求。

作者简介

前腾讯电子签的前端负责人，现 whentimes tech CTO，专注于前端技术的大咖一枚！一路走来，从小屏到大屏，从 Web 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

温馨提示：可搜老码小张公号联系导师


http://www.ppmy.cn/devtools/134838.html

相关文章

检查Android设备当前的声音模式

检查Android设备当前的声音模式

要检查Android设备当前的声音模式&#xff08;例如&#xff0c;是否为响铃模式、振动模式或静音模式&#xff09;&#xff0c;你可以使用 AudioManager 类。以下是如何获取设备是否处于非“响铃模式”的步骤&#xff1a; 使用 AudioManager 检查声音模式 import android.cont…
阅读更多...
基于STM32的智能停车管理系统设计

基于STM32的智能停车管理系统设计

引言 随着城市汽车保有量的增加&#xff0c;停车难问题日益严重&#xff0c;传统停车管理方式效率低下&#xff0c;无法满足现代化需求。为了解决这一问题&#xff0c;本项目基于STM32微控制器设计了一种智能停车管理系统。系统能够通过传感器实时监测停车位的使用情况&#x…
阅读更多...
如何理解DDoS安全防护在企业安全防护中的作用

如何理解DDoS安全防护在企业安全防护中的作用

DDoS安全防护在安全防护中扮演着非常重要的角色。DDoS&#xff08;分布式拒绝服务&#xff09;攻击是一种常见的网络攻击&#xff0c;旨在通过向目标服务器发送大量请求&#xff0c;以消耗服务器资源并使其无法正常运行。理解DDoS安全防护的作用&#xff0c;可以从以下几个方面…
阅读更多...
AI在电商中的应用：助力销售效率提升与用户体验优化

AI在电商中的应用：助力销售效率提升与用户体验优化

随着技术的发展&#xff0c;越来越多的电商平台开始尝试运用AI技术来提高销售效率&#xff0c;从用户体验到供应链管理&#xff0c;AI深刻影响着行业的未来发展趋势。 在AI加持下&#xff0c;如何使用AI技术实现购物推荐、会员分类、商品定价等方面的创新应用&#xff1f;如何运…
阅读更多...
酒水分销积分商城小程序开发方案php+uniapp

酒水分销积分商城小程序开发方案php+uniapp

酒水分销积分商城小程序开发&#xff0c;开发语言后端php&#xff0c;前端uniapp。核心功能模块&#xff1a;酒水商城、积分商城、二级分销、抽奖、优惠券。可以二开或定制。协助部署搭建。
阅读更多...
电动车租赁支付宝免押小程序开发方案php+uniapp

电动车租赁支付宝免押小程序开发方案php+uniapp

电动车支付宝免押小程序&#xff0c;免押租车系统开发&#xff0c;开发语言php&#xff0c;前端uniapp&#xff0c;技术协助申请支付宝信用免押&#xff0c;协助部署搭建上线。可以源码&#xff0c;也可以在此基础上二开或者定制。 一支付宝小程序端核心功能模块&#xff1a; …
阅读更多...
Java爬虫（Jsoup）详解

Java爬虫（Jsoup）详解

文章目录 Java爬虫&#xff08;Jsoup&#xff09;详解一、引言二、Jsoup 快速入门1、Jsoup 简介1.1、添加依赖 2、解析 HTML 文档2.1、解析 HTML 字符串2.2、从 URL 加载 Document2.3、解析 body 片断 三、数据抽取1、使用 DOM 方法遍历文档3.1、获取元素 2、使用选择器语法查找…
阅读更多...
MySQL常见面试题

MySQL常见面试题

MySQL 优化 定位慢查询 SQL执行计划 &#xff1a;SQL分析能力 SQL优化经验&#xff1a;SQL优化 索引 存储引擎索引底层数据结构聚簇和非聚簇索引索引创建原则索引失效场景 其他 事务相关&#xff1a;事务特性 隔离级别 MVVC主从同步原理&#xff1a;高并发分库分表&…
阅读更多...
最新文章

Copyright @ 2022~2023