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

在移动应用中，网络请求 是实现与服务器进行数据交互的核心功能。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 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/917547.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

微信小程序：vant组件库安装步骤

微信小程序：vant组件库安装步骤

前言&#xff1a;在微信小程序中引用vant组件报错&#xff0c;提示路径不存在&#xff0c;这很有可能是因为没有安装构建vant组件库导致。下面是我整理的安装vant组件库的步骤: 第一步&#xff1a;安装node.js(执行完第一步请重启小程序) 具体步骤请看链接&#xff1a;node.js…
阅读更多...
蓝桥杯-洛谷刷题-day3（C++）

蓝桥杯-洛谷刷题-day3（C++）

目录 1.忽略回车的字符串输入 i.getline() ii.逐个字符的识别再输入 2.获取绝对值abs() 3.做题时的误区 4.多个变量的某一个到达判断条件 i.max() 5.[NOIP2016 提高组] 玩具谜题 i.代码 6.逻辑上的圆圈 i.有限个数n的数组 7.数组的定义 i.动态数组 1.忽略回车的字符串输…
阅读更多...
Elasticsearch 查询时 term、match、match_phrase、match_phrase_prefix 的区别

Elasticsearch 查询时 term、match、match_phrase、match_phrase_prefix 的区别

Elasticsearch 查询时 term、match、match_phrase、match_phrase_prefix 的区别 keyword 与 text 区别term 查询match 查询match_phrase 查询match_phrase_prefix 查询写在最后 在讲述 es 查询时 term、match、match_phrase、match_phrase_prefix 的区别之前&#xff0c;先来了…
阅读更多...
Restful API接⼝简介及为什么要进⾏接⼝压测

Restful API接⼝简介及为什么要进⾏接⼝压测

一、RESTful API简介 在现代Web开发中&#xff0c;RESTful API已经成为一种标准的设计模式&#xff0c;用于构建和交互网络应用程序。本文将详细介绍RESTful API的基本概念、特点以及如何使用它来设计高效的API接口。 1. 基于协议 HTTP 或 HTTPS RESTful API通常使用HTTP&am…
阅读更多...
Android Studio 控制台输出的中文显示乱码

Android Studio 控制台输出的中文显示乱码

1. Android Studio 控制台输出的中文显示乱码 1.1. 问题 安卓在调试阶段&#xff0c;需要查看app运行时的输出信息、出错提示信息。乱码&#xff0c;会极大的阻碍开发者前进的信心&#xff0c;不能及时的根据提示信息定位问题&#xff0c;因此我们需要查看没有乱码的打印信息。…
阅读更多...
前端无感刷新token

前端无感刷新token

摘要&#xff1a; Axios 无感知刷新令牌是一种在前端应用中实现自动刷新访问令牌&#xff08;access token&#xff09;的技术&#xff0c;确保用户在进行 API 请求时不会因为令牌过期而中断操作 目录概览 XMLHttpRequestAxiosFetch APIJQuni.request注意事项&#xff1a; 访问…
阅读更多...
ubuntu固定ip

ubuntu固定ip

根据自己的VMware中的网关信息和ip信息设置。 然后进入到ubuntu虚拟机的网络设置目录 cd /etc/netplan nano 01-network-manager-all.yaml根据自己的ip来设置!](https://i-blog.csdnimg.cn/direct/f0be245ced5143618c059d6f0734ed81.jpeg#pic_center) 应用你的设置 sudo ne…
阅读更多...
阮一峰科技爱好者周刊（第 325 期）推荐工具：一个基于 Next.js 的博客和 CMS 系统

阮一峰科技爱好者周刊（第 325 期）推荐工具：一个基于 Next.js 的博客和 CMS 系统

近期&#xff0c;阮一峰在科技爱好者周刊第 325 期中推荐了一款开源工具——ReactPress&#xff0c;ReactPress一个基于 Next.js 的博客和 CMS 系统&#xff0c;可查看 demo站点。&#xff08;fecommunity 投稿&#xff09; ReactPress&#xff1a;一款值得推荐的开源发布平台 …
阅读更多...
DevOps工程技术价值流：打造卓越项目协作的优化宝典

DevOps工程技术价值流：打造卓越项目协作的优化宝典

一、引言 解锁项目协作的无限潜力&#xff0c;覆盖全链路实现流畅高效。 在当今瞬息万变的商业环境中&#xff0c;项目协作的效率和效果直接关系到企业的竞争力和市场响应速度。DevOps工程技术价值流中的项目协作优化&#xff0c;不仅是技术层面的革新&#xff0c;更是团队协…
阅读更多...
如何从头开始构建神经网络？（附教程）

如何从头开始构建神经网络？（附教程）

随着流行的深度学习框架的出现&#xff0c;如 TensorFlow、Keras、PyTorch 以及其他类似库&#xff0c;学习神经网络对于新手来说变得更加便捷。虽然这些框架可以让你在几分钟内解决最复杂的计算任务&#xff0c;但它们并不要求你理解背后所有需求的核心概念和直觉。如果你知道…
阅读更多...
[flask][html]如何取消marker伪元素

[flask][html]如何取消marker伪元素

【背景】 flask做项目时，导航栏默认出现小圆点，很难看，希望能够去除。 【分析】 前端查看后，发现是自动生成的伪元素：：marker。 【方法】 找到相应的标签，我的情况是li，追加style。 style="list-style: none;"完整li部分： <li class="</
阅读更多...
02-分布式对象存储设计原理

02-分布式对象存储设计原理

02-分布式对象存储设计原理 保存图片、音视频等大文件就是对象存储&#xff1a; 很好的大文件读写性能 还可通过水平扩展实现近乎无限容量 并兼顾服务高可用、数据高可靠 对象存储“全能”&#xff0c;主要因为&#xff0c;对象存储是原生分布式存储系统&#xff0c;相比MySQL、…
阅读更多...
【论文复现】STM32设计的物联网智能鱼缸

【论文复现】STM32设计的物联网智能鱼缸

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀STM32设计的物联网智能鱼缸 【1】项目功能介绍【2】设计需求总结【3】项目硬件模块组成 1.2 设计思路【1】整体设计思路【2】ESP8266工作模式…
阅读更多...
『OpenCV-Python』视频的读取和保存

『OpenCV-Python』视频的读取和保存

点赞 + 关注 + 收藏 = 学会了 推荐关注 《OpenCV-Python专栏》 上一讲介绍了 OpenCV 的读取图片的方法，这一讲简单聊聊 OpenCV 读取和保存视频。 视频的来源主要有2种，一种是本地视频文件，另一种是实时视频流，比如手机和电脑的摄像头。 要读取这两种视频的方法都是一样的…
阅读更多...
2024智能机器人与自动控制国际学术会议 （IRAC 2024）

2024智能机器人与自动控制国际学术会议 （IRAC 2024）

主办&#xff0c;承办&#xff0c;支持单位 会议官网 www.icirac.org 大会时间&#xff1a;2024年11月29-12月1日 大会简介 2024智能机器人与自动控制国际学术会议 &#xff08;IRAC 2024&#xff09;由华南理工大学主办&#xff0c;会议将于2024年11月29日-12月1日在中国广…
阅读更多...
table详细用法

table详细用法

注意&#xff1a;table元素上的很多属性都已经被废弃了&#xff0c;建议使用css方式替代。 表格的box-sizing默认值为border-box 例如&#xff1a; border-collapse属性 border-collapse CSS 属性是用来决定表格的边框是分开&#xff08;separate&#xff09;默认值的还是合并…
阅读更多...
【STM32】基于SPI协议读写SD，详解！

【STM32】基于SPI协议读写SD，详解！

文章目录 0 前言1 SD卡的种类和简介1.1 SD卡的种类1.2 SD卡的整体结构1.3 SD卡运行机制——指令和响应2 SD卡的通信总线2.1 SDIO2.2 SPI3 硬件连接4 代码实践【重点】4.1 HAL库移植4.2 标准库移植4.3 遇到的问题和解决方案5 扩展阅读0 前言 因为项目需要，使用stm32读写sd卡，这…
阅读更多...
ZooKeeper单机、集群模式搭建教程

ZooKeeper单机、集群模式搭建教程

单点配置 ZooKeeper在启动的时候&#xff0c;默认会读取/conf/zoo.cfg配置文件&#xff0c;该文件缺失会报错。因此&#xff0c;我们需要在将容器/conf/挂载出来&#xff0c;在制定的目录下&#xff0c;添加zoo.cfg文件。 zoo.cfg logback.xml 配置文件的信息可以从二进制包…
阅读更多...
如何在Mysql中生成0-23完整的小时数据

如何在Mysql中生成0-23完整的小时数据

目录 1. 创建表2. 插入0-23小时的数据3. 查询并合并数据 在数据分析中&#xff0c;我们经常需要对特定时间段内的数据进行统计和分析。 例如&#xff0c;在名片进线的场景中&#xff0c;我们可能需要了解一天内每小时的名片进线数量。 然而&#xff0c;由于某些时间点可能没有数…
阅读更多...
厦门凯酷全科技有限公司正规吗？

厦门凯酷全科技有限公司正规吗？

在这个短视频风起云涌的时代&#xff0c;抖音作为电商领域的黑马&#xff0c;正以惊人的速度改变着消费者的购物习惯与品牌的市场策略。在这场变革中&#xff0c;厦门凯酷全科技有限公司凭借其专业的抖音电商服务&#xff0c;在众多服务商中脱颖而出&#xff0c;成为众多品牌信…
阅读更多...
最新文章

Copyright @ 2022~2023