封装axios 不讲请求拦截和响应拦截么？？

来源：3-16 配置环境变量封装 axios 模块

隔城府窥红颜

2021-11-14

如题

写回答

1回答

Sunday

2021-11-14

已采纳

你好

拦截器部分在后面会讲到。现在没有讲解的原因是因为：当我们初始开发项目时，此时我们尚不知道拦截器应该怎么封装，所以“我们会在需要它的时候封装它”。

这是最终的 request.js 的代码

import axios from 'axios'
import store from '@/store'
import { ElMessage } from 'element-plus'
import { isCheckTimeout } from '@/utils/auth'

const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
config => {
// 在这个位置需要统一的去注入token
if (store.getters.token) {
if (isCheckTimeout()) {
// 登出操作
store.dispatch('user/logout')
return Promise.reject(new Error('token 失效'))
}
// 如果token存在注入token
config.headers.Authorization = `Bearer ${store.getters.token}`
}
// 配置接口国际化
config.headers['Accept-Language'] = store.getters.language
return config // 必须返回配置
},
error => {
return Promise.reject(error)
}
)

// 响应拦截器
service.interceptors.response.use(
response => {
const { success, message, data } = response.data
// 要根据success的成功与否决定下面的操作
if (success) {
return data
} else {
// 业务错误
ElMessage.error(message) // 提示错误消息
return Promise.reject(new Error(message))
}
},
error => {
// 处理 token 超时问题
if (
error.response &&
error.response.data &&
error.response.data.code === 401
) {
// token超时
store.dispatch('user/logout')
}
ElMessage.error(error.message) // 提示错误信息
return Promise.reject(error)
}
)

export default service