axios.js读法是爱克丝伊欧姿点杰斯。
Axios 是一个基于promise网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequests。
几大网络请求库：
Ion：Android Asynchronous Networking and Image Loading。
Volley：谷歌官方推出的网络请求和图片加载库。
Retrofit：Square开源的基于OKHttp的性能良好更安全的类库。
这个在Vue中很简单的就解决了，直接引入router，然后router.push，但是在React中，我们要使用props.history.push进行跳转(不使用window.location.href = ‘/login’，但是怎么在axios.js中拿到props呢？又是个问题。在axios中做统一拦截，在响应拦截中，判断后端返回的状态码code是否为403，403的话表示sessionId过期，我们需要让页面跳转到登录页面，凡是返回403有两种：
1、第一种是浏览器返回的403；
2、第二种是后端开发人员返回的403；
所以我们将响应拦截改成这样即可：
import axios from 'axios'
import https from 'https'
import { message } from "antd"
import eventBus from '@/utils/eventBus'
/**
* 如果有多个请求都是 403 就需要这个开关 来控制message的展示个数
* 展示一个之后 关闭阀门
*/
let messageFlag = false
/**
* props是app.js页面传入的 this.props
* 用于路由跳转 当403的时候 进行路由跳转
*/
let props = ""
/**
* 当使用这个js的时候 会监听这个自定义事件
* 改变props的值
*/
eventBus.$on((propsObj) =>{
props = propsObj
}, 'axiosInterceptorsFun')
const goLoginFun = () =>{
if (messageFlag === false) {
message.warning("登录已过期，请重新登录！")
messageFlag = true
setTimeout(() =>{
messageFlag = false
}, 2000)
props &&props.history.push('/login')
}
}
axios.defaults.timeout = 60000 * 5//设置默认超时 10s
axios.defaults.withCredentials = true
const instance = axios.create({
httpsAgent: new https.Agent({
rejectUnauthorized: false,
})
})
instance.interceptors.response.use(function (response) {
console.log(response, "接口返回")
let { data: { code } } = response
if (code === 403) {
goLoginFun()
return {}
}
return response
}, function (error) {
console.log(error.response, 'error1')
console.log(error.request, 'error2')
console.log(error, 'error3')
if (error.response) {
if (error.response.status == 403) {
goLoginFun()
}
return Promise.reject(error.response)
} else if (error.request) {
if (error.request.status == 403) {
goLoginFun()
}
return Promise.reject(error.request)
} else {
goLoginFun()
return Promise.reject(error.message)
}
})
登录后复制
主要是在这个js中我们监听了自定义事件axiosInterceptorsFun：
eventBus.$on((propsObj) =>{
props = propsObj
}, 'axiosInterceptorsFun')
登录后复制
这个事件我们可以在app.js跟组件中进行挂载的时候监听触发：
import eventBus from '@/utils/eventBus'
componentDidMount() {
eventBus.$emit('axiosInterceptorsFun',this.props)
}
登录后复制
当跟组件实例化的时候，axios已经开始监听axiosInterceptorsFun这个事件，在app.js中触发，所以在axios.js中我们已经拿到了props这个对象，这个对象上有我们需要的路由跳转方法。
eventBus.js内容：
const eventBus = {
evnetList: [],
// 监听事件
$on(callbackFun, name) {
this.evnetList.push({
name,
callbackFun
})
},
//触发事件
$emit(name, data) {
this.evnetList.forEach(element =>{
if (name === element.name) {
element.callbackFun(data)
}
})
},
}
export default eventBus
登录后复制
eventBus.js:
/*
* @Descripttion:
* @version:
* @Author: ZhangJunQing
* @Date: 2021-12-09 14:04:03
* @LastEditors: ZhangJunQing
* @LastEditTime: 2022-03-08 14:42:56
*/
const eventBus = {
evnetList: [],
// 监听事件
$on(callbackFun, name) {
// 同名事件 过滤
if (this.evnetList.length >0 &&this.evnetList.find(i =>i.name === name)) {
this.evnetList = this.evnetList.filter(i =>i.name !== name)
}
this.evnetList = [...this.evnetList, { name, callbackFun }]
},
//触发事件
$emit(name, data = '') {
if (!name) {
return false
}
this.evnetList.forEach(element =>{
if (name === element.name) {
element.callbackFun(data)
}
})
},
// 取消事件监听
$remove(name = "") {
// console.log(name, "取消事件监听")
this.evnetList = [...this.evnetList.filter(i =>i.name !== name)]
}
}
export default eventBus
登录后复制
这篇文章是对eventBus的解释：
React非父子组件之间的事件传递
