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 来设置 token
    req.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;