react 封装请求axios，直接调用即可

embedded/2024/10/19 0:21:43/

概要

我们在开发项目的时候，常常会遇到接口请求的问题的，若我们不进行接口的统一管理，代码开发不仅多而且很麻烦容易出错，也不利于项目的维护。下面我们一下学习下react项目中将如何封装请求，也从另一个方面中少写一些代码。哈哈

封装流程

1、在src目录下创建文件request

2、在文件request中创建api.ts和service.ts文件（默认ts格式类型）

3、在文件中写下封装代码

api.ts（主要写api请求接口）


export const LoginByAccount="/auth/login_weixin_by_account" //账号密码登录
export const LoginVcode="/login/vcode" //获取微信session

service.ts（axios请求封装）

//处理请求拦截和响应拦截
//引入
import axios  from "axios";//判断一下用户是否登录
function getToken(){ //获取tokenreturn sessionStorage.getItem('token')
}//3创建axios实例
let httpClient = axios.create({baseURL:"/api",timeout:6000,withCredentials:true
})//4创建请求拦截和响应拦截
httpClient.interceptors.request.use(//成功config=>{if(getToken()){config.headers['token']=getToken();}//返回return config},//错误err=>{return Promise.reject(err)})//响应拦截httpClient.interceptors.response.use(//成功response=>{let res = response.dataif(res.code=='401'){window.location.href='/login'}return Promise.resolve(res)},//错误err=>{return Promise.reject(err)})// 封装get请求
export const GET = (url:any, config = {}) => httpClient.get(url, config);// 封装post请求
export const POST = (url:any, data = {}, config = {}) => httpClient.post(url, data, config);// 封装put请求
export const PUT = (url:any, data = {}, config = {}) => httpClient.put(url, data, config);// 封装delete请求
export const DEL = (url:any, config = {}) => httpClient.delete(url, config);

4、页面的调用

import {POST} from "@/request/service"
import {LoginByAccount} from "@/request/api"const getCaptchaImg = async ()=>{//做验证码的请求GET(LoginVcode,'').then((res:any)=>{console.log(res);})
}