Axios配置指南 - 元素码农

发布时间: 2025-03-23 08:26

↑

# Axios配置指南

本文将详细介绍如何在React Native项目中配置和使用Axios进行网络请求。通过实际案例,你将学会如何使用Axios构建可靠的HTTP客户端,实现高效的数据交互。

## Axios基础

### 1. 安装配置

```bash
npm install axios
# 或者使用yarn
yarn add axios
```

### 2. 基本用法

```javascript
import axios from 'axios';

// GET请求
const fetchData = async () => {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error:', error);
  }
};

// POST请求
const postData = async () => {
  try {
    const response = await axios.post('https://api.example.com/users', {
      name: 'John Doe',
      email: 'john@example.com',
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error:', error);
  }
};
```

## 实例配置

### 1. 创建实例

```javascript
// api/axios.js
import axios from 'axios';

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

export default instance;
```

### 2. 请求配置

```javascript
const config = {
  method: 'post', // 请求方法
  url: '/users', // 请求URL
  baseURL: 'https://api.example.com', // 基础URL
  headers: { // 自定义请求头
    'Authorization': 'Bearer token',
  },
  params: { // URL参数
    id: 123,
  },
  data: { // 请求体数据
    name: 'John',
  },
  timeout: 5000, // 超时设置
  withCredentials: true, // 跨域请求时是否需要凭证
};

axios(config);
```

## 拦截器配置

### 1. 请求拦截器

```javascript
// api/interceptors.js
import axios from './axios';

// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
```

### 2. 响应拦截器

```javascript
// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data;
  },
  error => {
    // 对响应错误做点什么
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 未授权,跳转到登录页
          break;
        case 403:
          // 权限不足
          break;
        case 404:
          // 请求的资源不存在
          break;
        default:
          // 其他错误
          break;
      }
    }
    return Promise.reject(error);
  }
);
```

## 错误处理

### 1. 全局错误处理

```javascript
// utils/errorHandler.js
export const handleAxiosError = (error) => {
  if (error.response) {
    // 服务器返回错误状态码
    const { status, data } = error.response;
    switch (status) {
      case 400:
        return '请求参数错误';
      case 401:
        return '未授权,请重新登录';
      case 403:
        return '拒绝访问';
      case 404:
        return '请求的资源不存在';
      case 500:
        return '服务器内部错误';
      default:
        return `请求失败: ${data.message}`;
    }
  } else if (error.request) {
    // 请求已发出,但没有收到响应
    return '网络异常,请检查网络连接';
  } else {
    // 请求配置出错
    return '请求配置错误';
  }
};
```

### 2. 请求重试

```javascript
import axios from 'axios';
import axiosRetry from 'axios-retry';

const client = axios.create();

axiosRetry(client, {
  retries: 3, // 重试次数
  retryDelay: (retryCount) => {
    return retryCount * 1000; // 重试延迟
  },
  retryCondition: (error) => {
    // 定义重试条件
    return axiosRetry.isNetworkOrIdempotentRequestError(error);
  },
});
```

## 高级特性

### 1. 并发请求

```javascript
const fetchMultipleData = async () => {
  try {
    const [users, posts] = await axios.all([
      axios.get('/users'),
      axios.get('/posts')
    ]);
    
    console.log('Users:', users.data);
    console.log('Posts:', posts.data);
  } catch (error) {
    console.error('Error:', error);
  }
};

// 使用axios.spread
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((account, permissions) => {
    // 两个请求现已完成
  }));
```

### 2. 取消请求

```javascript
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/long-operation', {
  cancelToken: source.token
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled:', error.message);
  } else {
    // 处理错误
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');
```

## 最佳实践

### 1. API服务封装

```javascript
// services/api.js
import axios from '../api/axios';

export const userService = {
  login: (credentials) => axios.post('/auth/login', credentials),
  register: (userData) => axios.post('/auth/register', userData),
  getProfile: () => axios.get('/users/profile'),
  updateProfile: (data) => axios.put('/users/profile', data),
};

export const postService = {
  getPosts: (params) => axios.get('/posts', { params }),
  getPost: (id) => axios.get(`/posts/${id}`),
  createPost: (data) => axios.post('/posts', data),
  updatePost: (id, data) => axios.put(`/posts/${id}`, data),
  deletePost: (id) => axios.delete(`/posts/${id}`),
};
```

### 2. 环境配置

```javascript
// config/axios.js
import axios from 'axios';

const getBaseUrl = () => {
  switch (process.env.NODE_ENV) {
    case 'development':
      return 'http://localhost:3000/api';
    case 'staging':
      return 'https://staging-api.example.com';
    case 'production':
      return 'https://api.example.com';
    default:
      return 'http://localhost:3000/api';
  }
};

const instance = axios.create({
  baseURL: getBaseUrl(),
  timeout: 5000,
});

export default instance;
```

## 调试技巧

1. 请求日志
   - 使用拦截器记录请求和响应
   - 使用调试工具查看网络请求

2. 错误追踪
   - 集成错误监控系统
   - 记录详细的错误信息

3. 性能监控
   - 监控请求时间
   - 分析网络性能

## 参考资源

- [Axios文档](https://axios-http.com/)
- [React Native网络请求](https://reactnative.dev/docs/network)
- [HTTP协议规范](https://developer.mozilla.org/en-US/docs/Web/HTTP)

## 总结

通过本文的学习,你应该已经掌握了:

1. Axios的基本配置和使用方法
2. 拦截器的配置和应用场景
3. 错误处理和请求重试机制
4. 高级特性的使用技巧
5. 最佳实践和调试方法

在实际开发中,Axios是一个功能强大且易用的HTTP客户端库。通过合理的配置和使用,可以大大提高开发效率和应用性能。建议根据具体需求选择合适的配置方案,并注意遵循最佳实践。