手把手教你在 Vue 项目中优雅地封装 axios！

1.axios 简介

axios 是一个用来发起网络请求的 js 库，返回的格式是 Promise。

vue 项目中基本都是用 axios 发起网络请求。

2.安装配置 axios

2.1 安装 axios

npm i axios -- save

2.2 配置 axios

1. 创建 Axios 实例
2. 添加请求拦截器
3. 添加响应拦截器
4. 配置全局的 loading

在 src/util 下面新建 axios.js 文件

import axios from "axios";
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'
import { ref } from 'vue'
// -------------------------1. 创建axios实例-----------------------
const instance = axios.create({
    // 接口
    baseURL: "/api",
    // 超时时间
    timeout: 3000,
});
// -------------------------2.请求拦截-----------------------
instance.interceptors.request.use(
    config => {
        let token = sessionStorage.getItem('token');
        if (token) {
            config.headers['token'] = token
        }
        // 加载loading
        addLoading();
        return config;
    },
    error => {
        //  请求发生错误，抛出异常
        Promise.reject(error);
    }
);

// -------------------------3.响应拦截-----------------------
instance.interceptors.response.use(
    res => {
        // 取消加载 loading
        cancelLoading();
        return res;
    },
    error => {
        // 取消加载 loading
        cancelLoading();
        if (error && error.response) {
            const status = error.response.status
            switch (status) {
                case 400:
                    ElMessage.error("请求错误");
                    break;
                case 401:
                    ElMessage.error("未授权，请重新登录");
                    break;
                case 403:
                    ElMessage.error("登录过期，请重新登录");
                    break;
                case 404:
                    ElMessage.error("请求错误，未找到相应的资源");
                    break;
                case 408:
                    ElMessage.error("请求超时");
                    break;
                case 500:
                    ElMessage.error("服务器错误");
                    break;
                case 504:
                    ElMessage.error("网络超时");
                    break;
                default:
                    ElMessage.error("请求失败");
            }
        } else {
            if (JSON.stringify(error).includes("timeout")) {
                error.code = "TIMEOUT";
                error.message = "服务器响应超时，请刷新页面";
            }
        }
        return Promise.reject(error);
    },

);

// -------------------------4.配置全局loading-----------------------
let loadCount = 0;
let loadingInstance = ref(null);
// 加载loading
const addLoading = () => {
    loadCount++;
    if (loadCount === 1) {
        loadingInstance.value = ElLoading.service({
            fullscreen: false,
            text: "正在请求数据中....",
            background: "rgba(0, 0, 0, 0)",
        });
    }
};
// 取消加载loading
const cancelLoading = () => {
    loadCount--;
    if (loadCount === 0) {
        loadingInstance.value.close();
    };
};
// -------------------------配置全局loading-----------------------
// 5.导出 axios 实例
export default instance;

2.3 封装常用的 http 请求

在 /src/util 下面新建 http.js 文件

其实就是先引入 axios 实例，然后将 axios 的几种常用网络请求封装成 Promise 并返回。

import instance from "./axios";

const post = (url, data) => {
    return new Promise((resolve, reject) => {
        instance
            .post(url, data)
            .then((res) => {
                resolve(res);
            })
            .catch((err) => {
                reject(err);
            });
    });
};
const get = (url, data) => {
    return new Promise((resolve, reject) => {
        instance
            .get(url, { params: data })
            .then((res) => {
                resolve(res);
            })
            .catch((err) => {
                reject(err);
            });
    });
};
const put = (url, data) => {
    return new Promise((resolve, reject) => {
        instance
            .put(url, data)
            .then((res) => {
                resolve(res);
            })
            .catch((err) => {
                reject(err);
            });
    });
};
const del = (url, data) => {
    return new Promise((resolve, reject) => {
        instance
            .delete(url, { params: data })
            .then((res) => {
                resolve(res);
            })
            .catch((err) => {
                reject(err);
            });
    });
};

export default {
    post,
    get,
    put,
    del,
};

2.4 开发接口

在 /src/api 文件夹下新建接口文件

import http from "../utils/http";
// 用户登录
const login = (data) => {
    return http.post("/index/user/login", data);
};
export default { login }

3.请求案例

// 导入用户api
import userApi from "../api/user";

// 登录
const onSubmit = async () => {
    const res = await userApi.login(form);
    if (res.data.code == 200) {
        // 登录逻辑
    } else {
        ElMessage.error(res.data.message);
    }
};