React 模块化Axios封装请求 统一响应格式 请求统一处理

依赖

npm i  axios

拦截器

utils/request.js

import axios from "axios";const request = axios.create({baseURL: 'https://api.mxin.moe',timeout: 1000 * 10
});// 请求拦截器
request.interceptors.request.use(req => {// 使用 headers 来设置 tokenreq.headers["token"] = '123455';return req;
}, (error) => {// 请求错误处理return Promise.reject(error);
});// 响应拦截器
request.interceptors.response.use(res => {return res.data; // 只返回响应的 data 部分
}, (error) => {// 响应错误处理return Promise.reject(error);
});export default request;

接口模块化

api/user/info.js

import request from "../../utils/request";export function getUserInfo(params){return request({url:'/api/v1/mac/vendor',method:'get',params})
}

使用

import {getUserInfo} from "../../api/user/info";
import {useState} from "react";const Login = () => {const [user,setUser] =useState({})return (<div><button onClick={()=>{getUserInfo({daxue:'武汉大学'}).then(res=>{setUser(res)console.log(user)})}}>登录</button></div>);
};
export default Login;