每个项目的需求各有偏差,务必根据自己的项目调整相关配置
如大家有什么好的建议,可在评论区回复!
React封装axios请求库
1.创建 httpload.js 文件
import axios from 'axios';
import {
message } from 'antd';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
const http = axios.create({
baseURL: process.env.REACT_APP_BASE_API, // 从.env变量中读取的后台url地址
timeout: 300000, // 超时时长5分钟,
crossDomain: true
});
http.defaults.headers.post['Content-Type'] = 'multipart/form-data;application/json;charset=UTF-8;';
// 当前正在请求的数量
let needLoadingRequestCount = 0;
// 显示loading
function showLoading(target) {
if (needLoadingRequestCount === 0) {
NProgress.start();
}
needLoadingRequestCount++;
}
// 隐藏loading
function hideLoading() {
needLoadingRequestCount--;
needLoadingRequestCount = Math.max(needLoadingRequestCount, 0); // 做个保护
if (needLoadingRequestCount === 0) {
NProgress.done();
}
}
// 添加请求拦截器
let tempConfig = '';
http.interceptors.request.use(
config => {
// 判断当前请求是否设置了不显示Loading
tempConfig = config;
tempConfig.url = decodeURI(encodeURI(tempConfig.url).replace('%E2%80%8B', ''));
if (config.headers.showLoading !== false) {
showLoading(config.headers.loadingTarget);
}
const {
token } = sessionStorage;
if (token) {
config.headers.common.Authorization = `Bearer ${
token}`;
}
return config;
},
err => {
// 判断当前请求是否设置了不显示Loading
if (tempConfig.headers.showLoading !== false) {
hideLoading();
}
message.error('请求超时!');
return Promise.resolve(err);
}
);
// 响应拦截器
http.interceptors.response.use(
response => {
// 判断当前请求是否设置了不显示Loading（不显示自然无需隐藏）
if (response.config.headers.showLoading !== false) {
hideLoading();
}
return response;
},
error => {
hideLoading();
if (error.response && error.response.status) {
switch (error.response.status) {
case 401:
// 如有刷新token的需求,可放开以下代码
// var config=error.config;
// refreshTokenFuc(isRefreshToken, config, retryRequests);
message.error('登录信息已过期，请重新登录!');
break;
default:
break;
}
return Promise.reject(error.response);
}
return Promise.reject(error.response);
}
);
export default http;
2.创建api文件夹,将以下代码放入index.js
api封装后导出供页面使用
import request from "@/http/httpload.js"
export default{
getData(data){
return request({
url:"/api/xxx",
method:"post",
data:data
})
},
getIpAddress(data){
return request({
url:"/api/xxx",
method:"get",
parmas:data
})
}
}
3.react页面中调用
import React, {
Component } from 'react';
import {
Button, message } from 'antd';
import IPApi from '@/api/index';
class Http extends Component {
constructor(props) {
super(props);
this.state = {
ipAddress: {
}
};
}
async getIp() {
let res = await IPApi.getIpAddress('xxxx.xx.xx');
message.success('查询IP成功');
this.setState({
ipAddress: res.data.data
});
}
render() {
return (
<div>
<div>{
JSON.stringify(this.state.ipAddress)}</div>
<Button onClick={
() => this.getIp()}>网络请求</Button>
</div>
);
}
}
export default Http;
4.刷新refreshToken 代码 [非必须,根据具体需求使用]
如有刷新token的需求,将以下代码放入httpload.js文件中即可,
注:以下代码必须放到 响应拦截请求前
待解决问题:刷新refreshToken后,新Token获取正常,并重新自动请求了之前错误的请求,数据返回是正常的,但页面并不会重新渲染,因为数据请求时已经catch了! 目前暂无好的解决方法,需要用户点击一下页面上任意的按钮或者刷新页面即可
let isRefreshToken = false;//是否正在刷新token
let retryRequests = []; //用于存储错误请求的数组
// 刷新token方法
function refreshTokenFuc(isRefreshToken, config, retryRequests) {
if (!isRefreshToken) {
isRefreshToken = true;
var data = {
refreshtoken: sessionStorage.refreshtoken }
//TokenApi是自己封装的axios网络请求, 这里替换成你们自己请求后端刷新token的请求即可
TokenApi.refreshToken(data).then(res => {
sessionStorage.token = res.data.data.token.access_token;
sessionStorage.refreshtoken = res.data.data.token.refresh_token;
config.headers["Authorization"] = 'Bearer ' + res.data.data.token.access_token;
retryRequests.forEach((cb) => cb(res.data.data.token.access_token));
retryRequests = [];
return http.request(config);
}).catch(error => {
message.error("身份验证失败，请重新登录!");
sessionStorage.clear();
setTimeout(() => {
router.replace({
path: '/login',
// query: { redirect: router.currentRoute.fullPath }
})
}, 1500)
}).finally(() => {
isRefreshToken = false;
})
} else {
//存储错误的请求,待刷新token完成后,重新发起请求
return new Promise((resolve) => {
retryRequests.push((token) => {
config.headers["Authorization"] = 'Bearer ' + token;
resolve(http.request(config))
})
})
}
}