网络请求与本地存储：Axios 与 AsyncStorage 在 React Native 中的应用

Axios 是一个强大的工具：它简化了 React Native 中的 HTTP 请求，支持 GET、POST 等多种方法，并提供灵活的错误处理。
全局封装提升效率：通过集中配置 Axios，可以统一管理 API 请求，减少重复代码。
接口缓存优化性能：缓存 API 响应可以减少网络请求，支持离线功能。
错误处理增强体验：全局错误处理和用户友好的提示提升应用健壮性。
AsyncStorage 实现持久化：适合存储登录状态、用户偏好等小型数据，需注意异步操作和安全问题。

为什么需要网络请求和本地存储？

在 React Native 应用中，网络请求用于与服务器通信，获取数据或提交用户输入，而本地存储则用于在设备上保存数据，如用户登录信息或缓存内容。Axios 是一个流行的 HTTP 客户端，易于使用且功能丰富；AsyncStorage 是一个简单的键值存储系统，适合持久化小型数据。这两者结合可以帮助您构建高效、用户体验良好的移动应用。

如何使用 Axios 和 AsyncStorage？

您可以轻松安装 Axios 来发送 API 请求，并通过全局封装和拦截器统一管理请求。缓存响应可以减少网络负载，而错误处理确保应用稳定。AsyncStorage 则用于存储和检索数据，如登录令牌，需注意其异步特性和数据量限制。

下一步

通过本文的代码示例，您可以开始在项目中实现网络请求和本地存储。建议尝试构建一个简单的应用，例如获取用户数据并缓存，或保存登录状态，以加深理解。

网络请求与本地存储：Axios 与 AsyncStorage 在 React Native 中的应用

在移动应用开发中，网络请求和本地存储是构建功能丰富、用户体验流畅的应用不可或缺的组成部分。React Native 作为一个强大的跨平台框架，为开发者提供了灵活的工具来处理这些需求。其中，Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于发送 API 请求，而 AsyncStorage 是一个简单但实用的键值存储系统，用于在设备上持久化数据。本文将深入探讨如何在 React Native 应用中使用 Axios 进行网络请求，并结合 AsyncStorage 实现本地数据持久化。我们将覆盖从基础用法到高级技巧的方方面面，包括全局封装、接口缓存、错误处理和登录状态管理，旨在帮助开发者构建高效、健壮的移动应用。

1. 引言：网络请求与本地存储的重要性

移动应用的核心功能通常依赖于与服务器的实时通信和设备上的数据存储。网络请求允许应用获取最新数据（如用户信息、产品列表）或提交用户输入（如表单数据），而本地存储则用于保存用户偏好、认证令牌或缓存数据，以支持离线功能和快速响应。在 React Native 生态系统中，Axios 和 AsyncStorage 是处理这些需求的首选工具：

Axios：一个功能强大的 HTTP 客户端，支持多种请求方法（如 GET、POST）、拦截器和错误处理，适合与 RESTful API 交互。
AsyncStorage：一个异步的键值存储系统，适合存储小型数据，如登录状态或用户设置。

本文将通过详细的代码示例和最佳实践，指导您在 React Native 项目中实现网络请求和本地存储。我们将从 Axios 的基本用法开始，逐步深入到全局封装、接口缓存、错误处理和 AsyncStorage 的持久化应用，确保您能够全面掌握这些技术。

2. 使用 Axios 进行 API 请求

Axios 是一个基于 Promise 的 HTTP 客户端，因其简洁的 API 和丰富的功能（如拦截器、超时设置）在 React Native 社区中广受欢迎。与内置的 Fetch API 相比，Axios 提供了更一致的错误处理和更灵活的配置选项。

2.1 安装 Axios

要开始使用 Axios，首先需要在 React Native 项目中安装它。可以通过 npm 或 yarn 安装：

bash 复制代码

npm install axios

或

bash 复制代码

yarn add axios

安装完成后，您可以在项目中导入 Axios 并开始发送请求。

2.2 基本请求

Axios 支持多种 HTTP 方法，包括 GET、POST、PUT、DELETE 等。以下是一个简单的 GET 请求示例，用于从服务器获取数据：

javascript 复制代码

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('数据:', response.data);
  })
  .catch(error => {
    console.error('错误:', error.message);
  });

POST 请求示例，用于向服务器提交数据：

javascript 复制代码

axios.post('https://api.example.com/data', { key: 'value' })
  .then(response => {
    console.log('响应:', response.data);
  })
  .catch(error => {
    console.error('错误:', error.message);
  });

Axios 的响应对象包含以下属性：

属性	描述
`data`	服务器返回的数据
`status`	HTTP 状态码（如 200、404）
`headers`	响应头信息
`config`	请求的配置信息

2.3 在组件中使用 Axios

在实际应用中，API 请求通常在组件中触发，并根据响应更新 UI。以下是一个在 React Native 组件中使用 Axios 获取数据的示例：

javascript 复制代码

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import axios from 'axios';

const DataFetcher = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        setData(response.data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <Text style={styles.text}>加载中...</Text>;
  }

  if (error) {
    return <Text style={styles.text}>错误: {error}</Text>;
  }

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{JSON.stringify(data)}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
  },
});

export default DataFetcher;

说明：

使用 useEffect 在组件挂载时发送请求。
通过状态管理加载、错误和数据状态，确保用户界面反映当前请求状态。
错误信息通过 error.message 显示，数据通过 JSON.stringify 展示（实际应用中会解析并渲染）。

2.4 最佳实践

错误提示：为用户提供清晰的错误信息，避免直接显示技术细节。
加载状态：始终显示加载指示器（如 spinner），提升用户体验。
请求取消 ：对于可能被取消的请求（如用户快速切换页面），使用 Axios 的取消令牌（CancelToken）：

javascript 复制代码

const source = axios.CancelToken.source();

axios.get('https://api.example.com/data', { cancelToken: source.token })
  .then(response => console.log(response.data))
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('请求已取消');
    } else {
      console.error(error);
    }
  });

// 取消请求
source.cancel('用户取消了请求');

3. Axios 的全局封装

在大型应用中，分散的 API 请求可能导致代码重复和维护困难。通过全局封装 Axios，您可以集中管理请求配置、拦截器和端点函数，提升代码可维护性。

3.1 创建 API 服务

创建一个 api.js 文件来配置 Axios 实例：

javascript 复制代码

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default api;

配置说明：

baseURL：设置所有请求的公共基础 URL，简化端点定义。
timeout：设置请求超时时间（毫秒），防止请求无限挂起。
headers：定义默认请求头，如内容类型或认证信息。

3.2 使用拦截器

拦截器允许在请求发送前或响应接收后执行自定义逻辑，适用于添加认证令牌、记录日志或处理错误。

3.2.1 请求拦截器

以下是一个为请求添加认证令牌的拦截器示例：

javascript 复制代码

import AsyncStorage from '@react-native-async-storage/async-storage';

api.interceptors.request.use(
  async config => {
    const token = await AsyncStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

注意：由于 AsyncStorage 是异步的，拦截器中的异步操作可能导致延迟。在实际应用中，建议在发送请求时手动添加令牌，或确保令牌已预先加载。

3.2.2 响应拦截器

响应拦截器可用于全局错误处理：

javascript 复制代码

api.interceptors.response.use(
  response => response,
  error => {
    if (error.response) {
      console.error('服务器错误:', error.response.status);
    } else if (error.request) {
      console.error('网络错误:', error.message);
    } else {
      console.error('其他错误:', error.message);
    }
    return Promise.reject(error);
  }
);

3.3 创建包装函数

为每个 API 端点创建专用函数，简化调用并提高代码复用性：

javascript 复制代码

export const getUser = (id) => api.get(`/users/${id}`);
export const createUser = (data) => api.post('/users', data);
export const updateUser = (id, data) => api.put(`/users/${id}`, data);
export const deleteUser = (id) => api.delete(`/users/${id}`);

在组件中使用：

javascript 复制代码

import { getUser } from './api';

const UserProfile = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    getUser(1).then(response => setUser(response.data));
  }, []);

  return user ? <Text>{user.name}</Text> : <Text>加载中...</Text>;
};

3.4 最佳实践

集中配置：将所有 API 相关配置放在一个文件中，便于维护。
模块化：按功能模块（如用户、产品）组织 API 函数。
异步令牌：在请求函数中处理异步令牌获取，避免拦截器复杂化。

4. 接口缓存

缓存 API 响应可以减少网络请求、提升性能并支持离线功能。在 React Native 中，缓存可以通过内存、AsyncStorage 或专用库实现。

4.1 为什么需要缓存？

性能提升：缓存数据可立即显示，减少用户等待时间。
离线支持：缓存允许应用在无网络时显示历史数据。
服务器负载：减少重复请求，降低服务器压力。

4.2 缓存策略

策略	描述	适用场景
内存缓存	将数据存储在内存中	临时数据，应用关闭后无需保留
本地存储缓存	使用 AsyncStorage 持久化数据	需要跨会话保存的数据
库支持缓存	使用如 `axios-cache-adapter`	需要自动管理缓存的应用

4.3 使用 axios-cache-adapter

axios-cache-adapter 是一个为 Axios 提供缓存功能的库。首先安装：

bash 复制代码

npm install axios-cache-adapter

配置 AsyncStorage 作为缓存存储：

javascript 复制代码

import { setup } from 'axios-cache-adapter';
import AsyncStorage from '@react-native-async-storage/async-storage';

const asyncStorageAdapter = {
  getItem: async (key) => {
    const value = await AsyncStorage.getItem(key);
    return value ? JSON.parse(value) : null;
  },
  setItem: async (key, value) => {
    await AsyncStorage.setItem(key, JSON.stringify(value));
  },
  removeItem: async (key) => {
    await AsyncStorage.removeItem(key);
  },
};

const cache = setup({
  cache: {
    maxAge: 15 * 60 * 1000, // 缓存 15 分钟
    store: asyncStorageAdapter,
  },
});

const api = axios.create({
  adapter: cache.adapter,
  baseURL: 'https://api.example.com',
});

说明：

maxAge 设置缓存有效期（毫秒）。
asyncStorageAdapter 将缓存数据存储到 AsyncStorage。

使用缓存的 API：

javascript 复制代码

api.get('/data').then(response => console.log(response.data));

后续对同一端点的请求将返回缓存数据，直到缓存过期。

4.4 手动实现缓存

4.4.1 内存缓存

使用对象存储缓存数据：

javascript 复制代码

const cache = {};

export const getData = async (url) => {
  if (cache[url]) {
    return cache[url];
  }
  const response = await api.get(url);
  cache[url] = response.data;
  return response.data;
};

4.4.2 本地存储缓存

使用 AsyncStorage 实现持久化缓存：

javascript 复制代码

export const getCachedData = async (key) => {
  try {
    const cached = await AsyncStorage.getItem(key);
    if (cached) {
      return JSON.parse(cached);
    }
    const response = await api.get(`/data/${key}`);
    await AsyncStorage.setItem(key, JSON.stringify(response.data));
    return response.data;
  } catch (error) {
    console.error(error);
  }
};

改进：添加缓存过期机制：

javascript 复制代码

export const getCachedData = async (key) => {
  try {
    const cached = await AsyncStorage.getItem(key);
    if (cached) {
      const { data, timestamp } = JSON.parse(cached);
      if (Date.now() - timestamp < 15 * 60 * 1000) {
        return data;
      }
    }
    const response = await api.get(`/data/${key}`);
    await AsyncStorage.setItem(key, JSON.stringify({
      data: response.data,
      timestamp: Date.now(),
    }));
    return response.data;
  } catch (error) {
    console.error(error);
  }
};

4.5 最佳实践

缓存失效：为缓存设置过期时间或手动失效机制。
选择性缓存：仅缓存频繁访问或变化较慢的数据。
离线优先：优先使用缓存数据，失败时尝试网络请求。

5. 错误处理

良好的错误处理可以提升应用健壮性和用户体验。Axios 提供了灵活的错误处理机制，结合 React Native 的 UI 组件，可以为用户提供清晰的反馈。

5.1 错误类型

错误类型	描述	示例
网络错误	无网络连接或服务器不可达	`Network Error`
服务器错误	服务器返回 4xx 或 5xx 状态码	`401 Unauthorized`, `500 Internal Server Error`
超时错误	请求超过指定时间未完成	`Request Timeout`

5.2 全局错误处理

使用响应拦截器实现全局错误处理：

javascript 复制代码

import { Alert } from 'react-native';

api.interceptors.response.use(
  response => response,
  error => {
    let message = '未知错误';
    if (error.response) {
      message = `服务器错误: ${error.response.status}`;
      if (error.response.status === 401) {
        message = '未授权，请重新登录';
        // 导航到登录页面
      }
    } else if (error.request) {
      message = '网络不可用，请检查连接';
    } else {
      message = error.message;
    }
    Alert.alert('错误', message);
    return Promise.reject(error);
  }
);

说明：

使用 Alert 显示错误提示，实际应用中可使用 react-native-toast-message 等库。
根据状态码（如 401）执行特定操作，如重定向到登录页面。

5.3 重试失败请求

对于网络错误，可以尝试重试请求。使用 axios-retry 库简化实现：

bash 复制代码

npm install axios-retry

配置：

javascript 复制代码

import axiosRetry from 'axios-retry';

axiosRetry(api, {
  retries: 3,
  retryDelay: (retryCount) => retryCount * 1000,
  retryCondition: (error) => error.code === 'ECONNABORTED' || !error.response,
});

说明：

retries：最大重试次数。
retryDelay：重试间隔（毫秒）。
retryCondition：指定重试的错误类型（如超时或网络错误）。

5.4 最佳实践

用户友好：将技术错误转换为用户可理解的提示。
日志记录：记录错误详情，便于调试。
重试策略：仅对可恢复的错误（如网络问题）重试，避免无限循环。

6. 使用 AsyncStorage 进行本地持久化

AsyncStorage 是 React Native 提供的异步键值存储系统，适合存储小型数据，如用户令牌、偏好设置或缓存内容。

6.1 安装 AsyncStorage

AsyncStorage 通常作为独立模块使用，需安装：

bash 复制代码

npm install @react-native-async-storage/async-storage

6.2 存储和检索数据

6.2.1 存储数据

javascript 复制代码

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (error) {
    console.error('存储错误:', error);
  }
};

6.2.2 检索数据

javascript 复制代码

const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    return value;
  } catch (error) {
    console.error('读取错误:', error);
  }
};

6.2.3 存储和检索对象

对于复杂数据（如对象），需序列化为 JSON：

javascript 复制代码

const storeObject = async (key, object) => {
  try {
    const jsonValue = JSON.stringify(object);
    await AsyncStorage.setItem(key, jsonValue);
  } catch (error) {
    console.error('存储错误:', error);
  }
};

const getObject = async (key) => {
  try {
    const jsonValue = await AsyncStorage.getItem(key);
    return jsonValue ? JSON.parse(jsonValue) : null;
  } catch (error) {
    console.error('读取错误:', error);
  }
};

6.3 处理登录状态

AsyncStorage 常用于存储登录令牌和用户信息。以下是一个完整的登录和登出示例：

6.3.1 登录

javascript 复制代码

const login = async (username, password) => {
  try {
    const response = await api.post('/login', { username, password });
    const { token, user } = response.data;
    await storeObject('user', user);
    await storeData('token', token);
    return true;
  } catch (error) {
    console.error('登录错误:', error);
    return false;
  }
};

6.3.2 检查登录状态

javascript 复制代码

const checkLogin = async () => {
  try {
    const token = await getData('token');
    return !!token;
  } catch (error) {
    console.error('检查错误:', error);
    return false;
  }
};

6.3.3 登出

javascript 复制代码

const logout = async () => {
  try {
    await AsyncStorage.removeItem('token');
    await AsyncStorage.removeItem('user');
    // 导航到登录页面
  } catch (error) {
    console.error('登出错误:', error);
  }
};

6.4 最佳实践

实践	描述
异步处理	使用 `async/await` 避免竞争条件
错误处理	捕获并处理所有错误
数据量限制	避免存储大量数据，推荐 < 1MB
安全性	不要存储敏感信息，使用安全存储
数据迁移	在数据结构变化时处理旧数据

安全性注意 ：AsyncStorage 不加密数据。对于敏感信息（如令牌），考虑使用 react-native-keychain 或其他安全存储方案。

6.5 常见陷阱

同步误用：AsyncStorage 是异步的，需等待操作完成。
大文件存储：AsyncStorage 不适合存储大文件，可能导致性能问题。
未处理错误：未捕获的错误可能导致应用崩溃。

7. 综合示例：用户认证与数据获取

以下是一个综合示例，展示如何结合 Axios 和 AsyncStorage 实现用户登录、数据获取和缓存：

javascript 复制代码

import React, { useState, useEffect } from 'react';
import { View, Text, Button, Alert, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import api, { getCachedData, login, logout } from './api';

const App = () => {
  const [user, setUser] = useState(null);
  const [data, setData] = useState(null);

  useEffect(() => {
    const init = async () => {
      const storedUser = await AsyncStorage.getItem('user');
      if (storedUser) {
        setUser(JSON.parse(storedUser));
      }
    };
    init();
  }, []);

  const handleLogin = async () => {
    const success = await login('user', 'pass');
    if (success) {
      const storedUser = await AsyncStorage.getItem('user');
      setUser(JSON.parse(storedUser));
    } else {
      Alert.alert('错误', '登录失败');
    }
  };

  const handleFetchData = async () => {
    try {
      const response = await getCachedData('example');
      setData(response);
    } catch (error) {
      Alert.alert('错误', error.message);
    }
  };

  const handleLogout = async () => {
    await logout();
    setUser(null);
    setData(null);
  };

  return (
    <View style={styles.container}>
      {user ? (
        <>
          <Text style={styles.text}>欢迎, {user.name}</Text>
          <Button title="获取数据" onPress={handleFetchData} />
          <Text style={styles.text}>{data ? JSON.stringify(data) : '无数据'}</Text>
          <Button title="登出" onPress={handleLogout} />
        </>
      ) : (
        <Button title="登录" onPress={handleLogin} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
    margin: 10,
  },
});

export default App;

说明：

应用检查存储的用户数据以确定登录状态。
登录后获取缓存数据，失败时显示错误。
登出时清除存储并重置状态。

8. 结论

本文全面介绍了在 React Native 应用中使用 Axios 和 AsyncStorage 的方法，涵盖了网络请求的发送、全局封装、接口缓存、错误处理和本地数据持久化。通过这些技术，您可以构建性能优异、用户体验良好的移动应用。Axios 的灵活性和 AsyncStorage 的简单性使其成为 React Native 开发的理想选择，但需注意错误处理、缓存策略和 AsyncStorage 的局限性。

建议开发者在实际项目中实践这些概念，例如构建一个包含用户认证和数据缓存的应用。结合 Axios 文档和 AsyncStorage 文档，您可以进一步优化实现。

9. 进一步学习建议

实践项目：创建一个应用，结合 Axios 获取数据并用 AsyncStorage 缓存。
深入文档：阅读 React Native 网络文档和 axios-cache-adapter。
社区资源：关注 X 上的 React Native 讨论，获取最新动态。
替代方案 ：探索其他工具，如 react-native-mmkv（更快存储）或 fetch（内置 HTTP 客户端）。

通过不断实践，您将能够构建更复杂、性能更优的 React Native 应用！