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企服之家，中国第一个企服评测及商务社交产业平台。