axios拦截什么,axios拦截什么时候走error
axios参数错误是成功回调还是失败回调
请求拦截器使用场景：在请求被处理前拦截，做一些操作(例如：登录状态，通常登录成功后，后端会返回一个token，这个token会存储一些信息，这样前端每次发请求时带token才可以访问一些资源)。
请求拦截器使用方法(use方法有两个参数，第一个是请求前的回调函数，请求配置，也就是在发送请求前做一些操作。第二个是请求错误的回调函数)
拓展：promise有两个函数一个是reslove函数，一般成功时用，reject一般失败错误时用。
使用场景：在响应被处理前拦截，做一些操作。
响应拦截器使用方法：(use方法有两个参数，第一个是请求前的回调函数，请求配置，也就是在发送请求前做一些操作。第二个是请求错误的回调函数)
拓展：axios.get().then(res={})中的then相当于发送请求成功后的回调函数，而axios.get().catch(err={})相当于请求成功，对响应失败的处理，也就是reject的err会触发catch方法。
请求错误和响应错误区别：请求错误表示请求没有到达后端，浏览器会报一些错误，比如请求接口没有，就会报404。例如：从数据库查询某一条记录，但是没有，后台返回一个状态码和错误信息，此时就是响应错误(请求到达后端，返回错误称为响应错误。没到达后端，成为请求错误)。
取消拦截器使用方法
使用场景：对拦截器进行取消。
拓展：一般使用拦截器时，都是声明一个变量，给实例添加拦截器，给实例添加属性，一般不会给axios添加内容，避免造成全局污染。
拓展：当在请求拦截器中，对headers的属性进行赋值时，通常使用config.headers.token='',而不是config.headers={token:‘’},因为第二种方式会把headers里的其他属性覆盖掉。
不同axios实例访问不同接口，不同axios实例有不同拦截器，从而实现有需要拦截，有不需要拦截的。
请求拦截器其他使用场景：比如某一个请求，可能需要几秒，此时我们可以通过请求拦截器添加一个页面的等待的样式，等数据响应回来时再取消这个样式。
axios的拦截器代码应该放到请求代码什么地方
说明两点： interceptor必须在请求前设置才有效。 直接为axios全局对象创建interceptor，会导致全局的axios发出的请求或接收的响应都会被拦截到，所以应该使用axios.create()来创建单独的axios实例。 官方原话： You can add interceptors to a custom instance of axios. var instance = axios.create(); instance.interceptors.request.use(function () {/*...*/}); 用vue-cli创建了个测试项目，代码如下： Hello.vue script import axios from 'axios' export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } }, methods: { getImg () { axios.get('') .then((response) = { console.log(response) }).catch((error) =
vue路由拦截方法
在 src 目录下创建一个 interceptors 文件夹，
interceptors 文件夹下创建一个 index.js 文件，用于路由拦截的代码编辑。
全局引入 interceptors /index.js
在 main.js 中引入 interceptor
编辑 interceptors
引入 aixos，router
是给路由设置的，一定少不了 router，请求拦截的，少不了 axios
import axios from 'axios'
import Router from 'router'
代码编写
编写 发送与相应
axios.interceptors.request.use
axios.interceptors.response.use
axios不能拦截403错误
这个在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非父子组件之间的事件传递
axios和ajax的区别在哪里?
对于axios和ajax的区别我想还是有一部分知道的，但也有不知道的，那么我就给大家说说，其实他们两者的区别如下：
axios是通过promise实现对ajax技术的一种封装，它最早出现的发送后端请求技术，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，这就是他们的只有区别。
但是也可从它们的优缺点来看，也可以知道他们的区别：
第一个方面，从浏览器中创建， 客户端支持防止csrf， 提供了一些并发请求的接口，拦截请求和相应，转换请求和响应数据，自动转换json数据，最后就是体积小，这样极大的方便它的使用。
第二个方面，首先它用于浏览器和node环境下的http请求，基于promise异步，其次就是可以自动将数据转换为json格式，最后就是支持防止 跨站请求伪造，所以它也可以说是强大的。
从第三个方面，对于ajax，它是从浏览器中创建以及就是客户端支持防止跨站请求的伪造，提供了方便的很多的操作 ，拦截请求和响应，转换请求和响应数据，它还可以自动转换JSON数据。ajax本身是针对mvc编程，不符合现在前端mvvm的浪潮， 基于原生XHR开发，XHR本身的架构不清晰，不符合关注分离的原则，配置和调用方式非常混乱，而且基于事件的异步模型不友好。