axios二次封装

一、axios基本使用

axios
    .post('/api/login', {
        username: account.value.username,
        password: account.value.password,
    })
    .then(res => {
        const { resultCode, resultInfo } = res
        if (resultCode == 1) {
            router.push({ path: '/home' })
        } else {
            ElMessage.error(resultInfo)
        }
    })

二、将axios进行封装之后

• 代码封装，重用性高，减少代码量，减低维护难度
• 统一处理一些常规的问题一劳永逸，如http错误
• 拦截请求和响应，提前对数据进行处理，如获取token，修改配置项

三、示例

//要npm i
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 创建axios新实例
const axiosInstance = axios.create({
    baseURL: 'http://XX.XXX.XX.XXX:XXXX',//接口根地址
    timeout: 3000,//超时时间
})

/**
 * 请求拦截器
 */
axiosInstance.interceptors.request.use(
    config => {
        // 封装token鉴权
        const token = localStorage.getItem('Token')
        if (token) {
            config.headers['Authorization'] = token
        }
        return config
    },
    err => Promise.reject(err)
)

/**
 * 响应拦截器
 */
axiosInstance.interceptors.response.use(
    res => {
        // 过滤数据
        return res.data
    },
    err => {
        const { response } = err
        if (response) {
            const status = response.status
            switch (status) {
                case 404:
                    ElMessage.error('资源不存在 404')
                    break;
                case 403:
                    ElMessage.error('拒绝访问 403')
                    break;
                case 401:
                    ElMessage.error('身份凭证确实 401')
                    break;
                case 500:
                    ElMessage.error('服务器错误 500')
                    break;
                default:
                    ElMessage.error('出现意想不到的错误')
                    break;
            }
        }else {
            // 服务器崩溃问题或是网络问题
            if(!window.navigator.onLine) {
                ElMessage.error('当前网络不可用,请检查你的网络连接')
                return
            }else {
                ElMessage.error('连接服务器错误'+err?.message)
                return Promise.reject(err)
            }
        }
        return Promise.reject(err)
    }
)

export default axiosInstance

四、在axios二次封装时做了什么

• 设置baseURL和timeout
• 在请求拦截器中封装token鉴权
• 在响应拦截器中对数据过滤处理
• 在响应拦截器中http错误状态码进行判断等
• …