vue3.2+Promise+element-plus二次封装axios

一、实现思路

思路：
1.引入环境配置，根据启动环境 的mode不同，调用不同的baseURL
2.配置基础URL和请求超时时间
3.对请求进行拦截处理，进行配置
4.对响应进行拦截处理（需要和后端统一下，响应的格式）
5.引入Promise，以promise形式将响应进行返回，方便调用

二、核心代码

/**
 * axios 二次封装
 */

import axios from "axios";
import config from "../config";
import { ElMessage } from "element-plus";
import router from "../router";

const TOKEN_INVALID = "Token认证失败，请重新登陆";
const NETWORK_ERROR = "网络请求异常，请稍后重试";

// 创建axios实例对象，添加全局配置
const service = axios.create({
  baseURL: config.baseApi,
  timeout: 10000,
});

// 请求拦截
service.interceptors.request.use((req) => {
  const headers = req.headers;
  if (!headers.Authorization) headers.Authorization = "Bear QiTest";
  return req;
});

// 响应拦截
service.interceptors.response.use((res) => {
  const { code, data, msg } = res.data;
  if (code === 200) {
    return data;
  } else if (code === 40001) {
    ElMessage.error(TOKEN_INVALID);
    setTimeout(() => {
      router.push("/login");
    }, 15000);
    return Promise.reject(TOKEN_INVALID);
  } else {
    ElMessage.error(NETWORK_ERROR);
    return Promise.reject(NETWORK_ERROR);
  }
});

/**
 * 请求核心函数
 * @param {*} options 请求配置
 */
const request = (options) => {
  return new Promise((resolve, reject) => {
    options.method = options.method || "get";
    if (options.method.toLowerCase() === "get") {
      options.params = options.data;
    }
    if (config.env === "prod") {
      service.defaults.baseURL = config.baseApi;
    } else {
      service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi;
    }
    if (options.mock) {
      service.defaults.baseURL = config.mockApi;
    }
    service(options)
      .then((res) => resolve(res))
      .catch((error) => reject(error));
  });
};

export default request;

三、在src/api 下统一管理请求

在src/api下 建user.js

import request from "../utils/request";

// USER 为模块名 调用时使用 USER.login()
export const USER = {
  login: (params) =>
    request({
      url: "/login",
      method: "get",
      data: params,
    }),
};

四、页面使用

在script中引入 api

<script lang="ts" setup>
import { USER } from '../api/user'
// 调用方式1
const res = await USER.login()
console.log('res', res)
// 方式2
USER.login().then(res=>console.log(res))
}
</script>