在我们发送请求的时候会进行一些拦截处理,在响应数据的时候也会进行一些拦截处理。
1.全局代码
// 1.导入axios
import axios from 'axios'
import { Message } from 'element-ui'
import Store from '@/store'
import Router from '@/router'
// 2.创建axios副本
const _axios = axios.create({
baseURL: process.env.VUE_APP_BASE_API
})
// 3.请求拦截器
_axios.interceptors.request.use(
(config) => {
if (Store.state.user.token) {
config.headers.Authorization = `Bearer ${Store.state.user.token}`
}
return config
},
(error) => {
return Promise.reject(error)
}
)
// 4.响应拦截器
_axios.interceptors.response.use(
(res) => {
if (res.data.success) {
return res.data
} else {
// 错误的提示信息
Message.error(res.data.message)
// 让接口调用执行.catch,中止.then执行
return Promise.reject(res.data.message)
}
},
(error) => {
if (error.response && error.response.status === 401) {
// 清除token
// 清除用户信息
Store.commit('user/setToken', '')
Store.commit('user/setUserInfo', '')
Router.push('/login')
// 提示错误信息
Message.error(error.response.data.message)
// 跳转到登录页面进行传值
Router.push('/login?redirect=' + window.location.href.split('#')[1])
}
return Promise.reject(error)
}
)
// 5.暴露出去
export default _axios
2.请求拦截
_axios.interceptors.request.use(
(config) => {
if (Store.state.user.token) {
config.headers.Authorization = `Bearer ${Store.state.user.token}`
}
return config
},
(error) => {
return Promise.reject(error)
}
)
config对应的是在请求的时候要加的一些参数,比如在请求头上加token
error是在请求错误的时候返回的一个错误对象,又就是对请求错误的处理。
通过:
return Promise.reject(error)
例子:
在发送请求的时候网络被中断
3.响应拦截
响应拦截响应拦截已经给出了响应,对响应做处理。
_axios.interceptors.response.use(
(res) => {
if (res.data.success) {
return res.data
} else {
// 错误的提示信息
Message.error(res.data.message)
// 让接口调用执行.catch,中止.then执行
return Promise.reject(res.data.message)
}
},
(error) => {
if (error.response && error.response.status === 401) {
// 清除token
// 清除用户信息
Store.commit('user/setToken', '')
Store.commit('user/setUserInfo', '')
Router.push('/login')
// 提示错误信息
Message.error(error.response.data.message)
// 跳转到登录页面进行传值
Router.push('/login?redirect=' + window.location.href.split('#')[1])
}
return Promise.reject(error)
}
)
res代表什么? res指的是响应回来的数据
error? error 指的是响应回来的错误
前端提供参数 后端拿到参数查询数据库 ,将查询数据库的结果返回给前端。
响应回来的数据只有两种情况,比如说查询到了 李华的信息 所以 return res.data。
还有一种可能后台根据你提供的一些参数没有参数到结果,后台就是根据error的res.data.message来提供的提示。
第二个error回调是服务器响应回来的一个错误,比如说401代表没有权限,500代表服务器崩了。
302代表地址重定向了,根据错误码来重新进行处理。
4.总结
在我们发送请求的时候肯定要对接口api进行一些封装,无不例外有两种情况 请求拦截和响应拦截
请求拦截的两个参数 res:请求的数据,error指的是请求的错误。请求中网络中断走error。
响应拦截的两个参数res:响应的数据,error指的是响应的错误。401权限不足,500服务器崩了。
5.不一样的两个错误
在响应拦截中有两个错误,一个是响应的时候服务器的错误,一个是前端给后端传递参数在数据库中进行查询,但是没有找到返回的错误。这两个错误是不一样的处理的逻辑也是不一样的。通过这两个例子可以很好地去理解拦截器。
后面还会更新其它的api封装 uni等。持续更新中。