- 抽取一个request.js配置共同功能
- 完成了axios实例化
- 完成了axios基地址配置
- 设置withCredentials为true
- 创建axios拦截器
- 统一token添加(自动添加本地token到请求头)
- 统一错误处理
- 400
- 401
- 403
- 500
- 200
- 根据不同模块，定义为不同的js文件
- 比如login.js，register.js
- 在对应的js文件中，放置与模块相关的请求
- register.js中包含getPhoneCodeApi和registerUserApi
- axios的拦截器是一个作用非常大，非常好用的东西。分为
请求拦截器和响应拦截器两种 - 基本上每个项目都会在拦截器里面做一些统一的处理
- 请求拦截器一般做什么呢？
- 统一token添加(自动添加本地token到请求头)
- 响应拦截器一般做什么呢？
- 统一状态码处理
- 400 ：客户端请求参数错误
- 401： token 无效，token过期
- 403：没有权限操作，一般就是缺少token
- 500：服务端异常
- 200：一切正常
- 统一状态码处理
看代码
请求拦截器
request.interceptors.request.use(
function (config) {
// Do something before request is sent
const { user } = store.state
// 如果用户已登录，统一给接口设置 token 信息
if (user) {
config.headers.Authorization = `Bearer ${user.token}`
}
// 处理完之后一定要把 config 返回，否则请求就会停在这里
return config
},
function (error) {
// Do something with request error
return Promise.reject(error)
}
)
响应拦截器
// 响应拦截器
request.interceptors.response.use(
function (response) {
// 响应成功进入这里
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
return response
},
async function (error) {
// 请求响应失败进入这里
// 超过 2xx 的状态码都会进入这里
const status = error.response.status
if (status === 400) {
// 客户端请求参数错误
Toast.fail('客户端请求参数异常')
} else if (status === 401) {
// token 无效
// 如果没有 user 或者 user.token，直接去登录
const { user } = store.state
if (!user || !user.token) {
// 直接跳转到登录页
return redirectLogin()
}
// 使用 refresh_token 请求获取新的 token
try {
const { data } = await refreshTokenReq({
method: 'PUT',
url: '/app/v1_0/authorizations',
headers: {
Authorization: `Bearer ${user.refresh_token}`
}
})
// 拿到新的 token 之后把它更新到容器中
user.token = data.data.token
store.commit('setUser', user)
// 把失败的请求重新发出去
// error.config 是本次请求的相关配置信息对象
// 这里使用 request 发请求，它会走自己的拦截器
// 它的请求拦截器中通过 store 容器访问 token 数据
return request(error.config)
} catch (err) {
// 刷新 token 都失败了，直接跳转登录页
redirectLogin()
}
} else if (status === 403) {
// 没有权限操作
Toast.fail('没有权限操作')
} else if (status >= 500) {
// 服务端异常
Toast.fail('服务端异常，请稍后重试')
}
// 抛出异常
return Promise.reject(error)
}
)
