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

相关推荐
小光学长1 分钟前
基于Vue的保护动物信息管理系统r7zl6b88 (程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
huangql52021 分钟前
截图功能技术详解:从原理到实现的完整指南
前端·html5
长空任鸟飞_阿康36 分钟前
Node.js 核心模块详解:fs 模块原理与应用
前端·人工智能·ai·node.js
这儿有一堆花1 小时前
网站链接重定向原理
前端
cecyci1 小时前
如何实现AI聊天机器人的打字机效果?
前端·javascript
IT_陈寒1 小时前
Vite 5个隐藏技巧让你的项目构建速度提升50%,第3个太香了!
前端·人工智能·后端
詩句☾⋆᭄南笙1 小时前
HTML的盒子模型
前端·html·盒子模型
落言1 小时前
AI 时代的工程师:懂,却非懂的时代
前端·程序员·架构
一枚攻城狮1 小时前
前端知识点大汇总
前端
Mike_jia3 小时前
DumbAssets:开源资产管理神器,家庭与企业的高效管家
前端