1.安装Axios
首先安装axios
npm install axios
2.创建request.js
在util目录下创建request.js文件，用于封装axios请求
// util/request.js
import axios from 'axios';// 创建 Axios 实例
const instance = axios.create({baseURL: process.env.REACT_APP_API_BASE_URL, // 从环境变量中读取timeout: 10000, // 请求超时时间headers: {'Content-Type': 'application/json',},
});// 请求拦截器
instance.interceptors.request.use((config) => {// 在发送请求之前做些什么，例如添加 tokenconst token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use((response) => {// 对响应数据做些什么return response.data;},(error) => {// 对响应错误做些什么if (error.response) {switch (error.response.status) {case 401:// 处理未授权的情况break;case 404:// 处理未找到资源的情况break;default:// 处理其他错误break;}}return Promise.reject(error);}
);// 封装 GET 请求
export const get = (url, params) => {return instance.get(url, { params });
};// 封装 POST 请求
export const post = (url, data) => {return instance.post(url, data);
};// 封装 PUT 请求
export const put = (url, data) => {return instance.put(url, data);
};// 封装 DELETE 请求
export const del = (url) => {return instance.delete(url);
};
3.在组件中使用封装的请求
可以在 React 组件中使用封装好的请求方法。
// src/components/ExampleComponent.js
import React, { useEffect, useState } from 'react';
import { get, post } from '../api';const ExampleComponent = () => {const [data, setData] = useState(null);useEffect(() => {// 使用封装的 GET 请求get('/posts').then((response) => {setData(response);}).catch((error) => {console.error('Error fetching data:', error);});// 使用封装的 POST 请求post('/posts', {title: 'foo',body: 'bar',userId: 1,}).then((response) => {console.log('Post created:', response);}).catch((error) => {console.error('Error creating post:', error);});}, []);return (<div><h1>Example Component</h1>{data && (<ul>{data.map((item) => (<li key={item.id}>{item.title}</li>))}</ul>)}</div>);
};export default ExampleComponent;
4.axios和umi-request封装请求的区别
umi-request:umi-request 是 Umi 框架内置的请求库，基于 fetch 封装，专为 Umi 生态设计。适用于使用 Umi 框架的项目。umi-request 的拦截器设计更简洁，直接通过 interceptors 方法实现。
axios:axios 是一个独立的、广泛使用的 HTTP 请求库，基于 XMLHttpRequest 封装。适用于任何 React 项目（无论是否使用 Umi）。axios 的拦截器设计更灵活，支持请求和响应拦截。
