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

概要

我们在开发项目的时候，常常会遇到接口请求的问题的，若我们不进行接口的统一管理，代码开发不仅多而且很麻烦容易出错，也不利于项目的维护。下面我们一下学习下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(){ //获取token
  return 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.data
      if(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);
    })
}

小结

实现起来比较简单，需要的小伙伴可以直接拿去用，在自己的项目上进行兼容调试即可

需要全部项目调试的源码可以前往

GitHub - yididid/react-manage: 主要运用了React + TypeScript + Vite + toolkit + redux技术来开发商品管理后台，开发了路由、接口请求（包含跨域解决）等基本功能的开发，喜欢的小伙伴可以拿去