ToB企服应用市场:ToB评测及商务社交产业平台

标题: react 封装哀求axios，直接调用即可 [打印本页]
作者: 南七星之家    时间: 2024-6-11 12:40
标题: react 封装哀求axios，直接调用即可
概要
我们在开辟项目的时间，常常会遇到接口哀求的问题的，若我们不举行接口的统一管理，代码开辟不但多而且很贫苦轻易堕落，也倒霉于项目的维护。下面我们一下学习下react项目中将怎样封装哀求，也从另一个方面中少写一些代码。哈哈
封装流程

1、在src目次下创建文件request
2、在文件request中创建api.ts和service.ts文件（默认ts格式范例）
3、在文件中写下封装代码
api.ts（重要写api哀求接口）
  2. export const LoginByAccount="/auth/login_weixin_by_account" //账号密码登录
  3. export const LoginVcode="/login/vcode" //获取微信session
复制代码
service.ts（axios哀求封装）
  1. //处理请求拦截和响应拦截
  2. //引入
  3. import axios  from "axios";
  6. //判断一下用户是否登录
  7. function getToken(){ //获取token
  8.   return sessionStorage.getItem('token')
  9. }
  11. //3创建axios实例
  12. let httpClient = axios.create({
  13.   baseURL:"/api",
  14.   timeout:6000,
  15.   withCredentials:true
  16. })
  18. //4创建请求拦截和响应拦截
  19. httpClient.interceptors.request.use(
  20.     //成功
  21.     config=>{
  22.       if(getToken()){
  23.         config.headers['token']=getToken();
  24.       }
  25.       //返回
  26.       return config
  27.     },
  28.     //错误
  29.     err=>{
  30.       return Promise.reject(err)
  31.     }
  32.   )
  33.   //响应拦截
  34.   httpClient.interceptors.response.use(
  35.     //成功
  36.     response=>{
  37.       
  38.       let res = response.data
  39.       if(res.code=='401'){
  40.         window.location.href='/login'
  41.       }
  42.       return Promise.resolve(res)
  43.     },
  44.     //错误
  45.     err=>{
  46.       return Promise.reject(err)
  47.     }
  48.   )
  50. // 封装get请求
  51. export const GET = (url:any, config = {}) => httpClient.get(url, config);
  53. // 封装post请求
  54. export const POST = (url:any, data = {}, config = {}) => httpClient.post(url, data, config);
  56. // 封装put请求
  57. export const PUT = (url:any, data = {}, config = {}) => httpClient.put(url, data, config);
  59. // 封装delete请求
  60. export const DEL = (url:any, config = {}) => httpClient.delete(url, config);
复制代码
4、页面的调用
  1. import {POST} from "@/request/service"
  2. import {LoginByAccount} from "@/request/api"
  5. const getCaptchaImg = async ()=>{
  6.     //做验证码的请求
  7.     GET(LoginVcode,'').then((res:any)=>{
  8.       console.log(res);
  9.     })
  10. }
复制代码

小结

实现起来比较简单，必要的小伙伴可以直接拿去用，在自己的项目上举行兼容调试即可
必要全部项目调试的源码可从前去
GitHub - yididid/react-manage: 重要运用了React + TypeScript + Vite + toolkit + redux技术来开辟商品管理后台，开辟了路由、接口哀求（包罗跨域办理）等基本功能的开辟，喜好的小伙伴可以拿去

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4