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

概要

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

封装流程

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

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

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

api.ts(主要写api请求接口)

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

service.ts(axios请求封装)

javascript 复制代码
//处理请求拦截和响应拦截
//引入
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、页面的调用

javascript 复制代码
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技术来开发商品管理后台,开发了路由、接口请求(包含跨域解决)等基本功能的开发,喜欢的小伙伴可以拿去

相关推荐
群联云防护小杜14 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台32 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹39 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构