在Vue3项目中使用Axios拦截器和封装请求方法

安装Axios并引入

1. 安装 Axios

   pnpm install axios
   

2. 在Vue3项目的主文件 main.js中引入

   import axios from "axios";
   

一些全局配置

// 设置请求链接
axios.defaults.baseURL = 'https://blog.zeroxn.com/api';
// 最长等待时间 10s
axios.defaults.timeout = 100000;
// 开启携带Cookie
axios.defaults.withCredentials = true;

使用拦截器

// response拦截器 还有request拦截器
axios.interceptors.response.use(res => {
    	// 后端发回来的用户未登录的响应码
        if(res.data.code === 1001){
            elMessageErr('登录之后才可以访问！')
            // 跳转到登录页面
            setTimeout(() => {
                window.top.location.href = '/cola/login';
            }, 300)
        //只有在后端返回code为1的情况下才表示操作成功 若不是1则打印错误消息
        }else if(res.data.code !== 1){
            elMessageErr(res.data.message)
        }else{
            // 直接返回数据
            return res.data;
        }
    },
    error => {
    	// 针对请求错误的处理
        const message = error.message;
        if (message === 'Network Error'){
            elMessageErr('网络链接异常！');
        }else if(message.includes('timeout')){
            elMessageErr('接口链接超时！');
        }else if(message.includes('500')){
            elMessageErr('后端接口500异常！');
        }else if(message.includes('404')){
            elMessageErr('后端接口404异常！');
        }else{
            elMessageErr('未知异常！');
        }
    }
)

封装请求

需要使用一个叫做 await-to-js的插件，帮助更好的处理 Promise操作

pnpm install await-to-js

/**
 * 封装GET请求 响应码符合要求就直接返回数据 在页面中调用方法时 可以直接指定参数等于某个请求方法的返回值
 * @param url 请求链接
 * @param data 请求携带的数据
 * @returns {Promise<*>}
 * @private
 */
export async function _get(url, data){
    // 封装Post请求不需要 直接 axion.post(url, data)即可
    const params = {
        url: url,
        method: 'get',
        params: data ? data : ''
    }
    const [err,res] = await to(axios(params))
    // 返回结果 res 存在 并且不存在 err
    if (!err && res){
        // 根据后端的响应码判断
        if (res.code === 1){
        	return res.data;
        }
        return null;
    }else{
        console.log(err)
    }
}

然后将所有的接口请求都封装到一个JS文件里面，方便后期维护

export function _updateLinkType(id, bl){
    return _put('/links/type', {id: id, isShow: bl})
}