一文全面掌握 React-Antd-Admin 中 Axios 的封装

2024-01-20 16:33:06

在 React-Antd-Admin 中封装 Axios：提升企业级开发效率

简介

React-Antd-Admin 和 Axios 是两个强大的工具，React-Antd-Admin 专注于构建企业级管理系统，而 Axios 则擅长处理 HTTP 请求。通过将这两个工具相结合，我们可以显著提升开发效率。

Axios 封装

在 React-Antd-Admin 中封装 Axios 的步骤如下：

安装 Axios： npm install axios
创建 axios.js 文件：

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 10000,
});

export default api;

导入封装后的 Axios： import api from './axios';
使用封装后的 Axios：

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

请求和响应拦截

有时候，我们需要在发送请求或处理响应之前进行一些额外处理。Axios 的请求拦截器和响应拦截器可以满足这一需求。

请求拦截器： 在发送请求之前执行，可修改请求配置或取消请求。
响应拦截器： 在收到响应之后执行，可修改响应数据或处理错误。

使用方式：

// 请求拦截器
api.interceptors.request.use((config) => {
  // ... 修改请求配置
  return config;
});

// 响应拦截器
api.interceptors.response.use((response) => {
  // ... 修改响应数据
  return response;
}, (error) => {
  // ... 处理错误
  return Promise.reject(error);
});

错误处理

在处理请求时难免会遇到错误，使用 Axios 的 catch() 方法可以妥善处理这些错误：

api.get('/users').catch((error) => {
  console.log(error.message);
});

根据错误类型或状态码，可以执行不同的处理逻辑，例如显示错误信息、重试请求或跳转到错误页面。

代码示例

// 获取用户列表
const getUsers = async () => {
  try {
    const response = await api.get('/users');
    console.log(response.data);
  } catch (error) {
    console.log(error.message);
  }
};

// 创建新用户
const createUser = async (data) => {
  try {
    const response = await api.post('/users', data);
    console.log(response.data);
  } catch (error) {
    console.log(error.message);
  }
};