Vue axios 拦截器
正常情况下打开浏览器前端页面向后端发起请求使用的是axios,无论是原生的axios还是自己封装的axios都看成是axios。这些都是优先于你的axios.get()/post()去执行的,不管是在get/post发起请求之前还是获得响应之后,你得先经过拦截器!主要去处理响应是否成功,拿到返回业务状态码的逻辑,这个时候其实是自定义的响应,到底业务有没有成功,这决定了你的前端展示。请求拦截器就是你
·
正常情况下打开浏览器前端页面向后端发起请求使用的是axios,无论是原生的axios还是自己封装的axios都看成是axios。发起请求之后后端去数据库里面拿数据,然后返回给前端。
发起请求的地方是axios,并且你能够封装这个axios,那么你就可以添加拦截器。
请求拦截器就是你在发起请求的时候应该做什么事情,响应拦截器就是你在接收到这个请求之后应该去干什么。
拦截器可以拦截每一次请求和响应,然后进行相应的处理。
- 请求拦截应用场景: 发起请求前添加header
使用最多的场景就是前端调用后端,后端是有鉴权逻辑的,前端需要添加一个token。前端在登入的时候就应该获取这个token了,这个token加到url的参数之内。
响应拦截应用场景:
- 统一处理API响应状态码200或非200的提示消息,拿到业务的状态码。做一些自定义的响应配置
- 统一处理catch异常提示信息
主要去处理响应是否成功,拿到返回业务状态码的逻辑,这个时候其实是自定义的响应,到底业务有没有成功,这决定了你的前端展示。
这些都是优先于你的axios.get()/post()去执行的,不管是在get/post发起请求之前还是获得响应之后,你得先经过拦截器!!!不然封装也没多大的意义。
import axios from "axios"
const axios_instance = axios.create({
baseURL: 'http://httpbin.org',
timeout: 5000,
})
//请求之前要去干什么
//添加请求拦截器,固定写法,config是接受参数,可以取其他名称
//能够利用config的方式去做请求拦截上面的配置
axios_instance.interceptors.request.use(
config => {
//在请求之前做的事情,比如添加请求头
config.headers['Test-header'] = 'zhangsan'
return config
},
error=>{
//请求发生了error,处理请求错误
//axios是基于ajax和promise封装的
//Promise.reject代表在使用instance发起请求的时候,失败了在catch语句中可以获取
//.then .catch .finally都是promise提供的能力
return Promise.reject(error)
}
)
响应拦截器
import axios from "axios"
const axios_instance = axios.create({
baseURL: 'http://httpbin.org',
timeout: 5000,
})
//请求之前要去干什么
//添加请求拦截器,固定写法,config是接受参数,可以取其他名称
//能够利用config的方式去做请求拦截上面的配置
axios_instance.interceptors.request.use(
config => {
//在请求之前做的事情,比如添加请求头
config.headers['Test-header'] = 'zhangsan'
return config
},
error=>{
//请求发生了error,处理请求错误
//axios是基于ajax和promise封装的
//Promise.reject代表在使用instance发起请求的时候,失败了在catch语句中可以获取
//.then .catch .finally都是promise提供的能力
return Promise.reject(error)
}
)
//添加响应拦截器,响应之后需要干什么
//先在这里处理,最后到你的.vue组件当中的.then().catch().finally()中处理
//要先经过这个地方
axios_instance.interceptors.response.use(
response =>{
//响应接收后做的事情,在.then .catch接受之前
//业务层的报错
if(response.data.code != 200){
alert('数据请求失败')
return Promise.reject(response)
}
return response
},
error =>{
//状态码非200范围内
return Promise.reject(error)
}
)
export default axios_instance
更多推荐
已为社区贡献10条内容
所有评论(0)