Vue3 axios封装并为为响应数据进行定制化处理

1.首先安装axios依赖

npm i axios

2.在项目根目录创建http文件，并在该文件下创建request.ts用来封装axios及响应数据定制化处理，另外再创建一个status.ts用来处理接口返回的状态及错误提示

request.ts代码如下：

import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig, AxiosRequestConfig } from 'axios';
import { ElMessage } from 'element-plus';
import { getMessageInfo } from './status';

/**
 * 接口默认返回的数据格式
 */
interface BaseResponse<T = any> {
    code: number | string;
    message: string;
    data: T;
    status?: number | string;
}

// 创建axios
const service = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 15000,
});
// axios实例拦截请求
service.interceptors.request.use(
    (config: InternalAxiosRequestConfig) => {
        return config;
    },
    (error: AxiosError) => {
        return Promise.reject(error);
    }
);
// axios实例拦截响应
service.interceptors.response.use(
  (response: AxiosResponse) => {
    if (response.status === 200) {
      const data = response.data;
      if (data.code !== 0) {
        ElMessage({
          message: data.message,
          type: "error",
        });
        return Promise.reject(data);
      } else {
        return data;
      }
    }
    ElMessage({
      message: getMessageInfo(response.status),
      type: "error",
    });
    return response;
  },
  // 请求失败
  (error: any) => {
    const { response } = error;
    if (response) {
      ElMessage({
        message: getMessageInfo(response.status),
        type: "error",
      });
      return Promise.reject(response.data);
    }
    ElMessage({
      message: "网络连接异常,请稍后再试!",
      type: "error",
    });
  },
);
export default service;

status.ts代码如下：

export const getMessageInfo = (status: number | string): string => {
    let msg = '';
    switch (status) {
        case 400:
            msg = '请求错误(400)';
            break;
        case 403:
            msg = '拒绝访问(403)';
            break;
        case 401:
            msg = '未授权(401)';
            break;
        case 500:
            msg = '服务器错误(500)';
            break;
        case 503:
            msg = '服务不可用(503)';
            break;
        default:
            msg = `连接出错(${status})!`;
    }
    return msg;
};

3.项目根目录下新建一个api文件用来管理后端接口，该文件夹下可对接口进行模块化管理说的简单点就是一个模块的接口放到一个.ts文件下

以用户模块演示就是在api文件下创建一个user.ts代码详情如下：

import service from "@/http/request";

export type LoginRequest = {
  username: string;
  password: string;
};
// 刷新登录信息需要的参数
export type reLoginRequest = {
  accessToken: string;
};
export type LoginResponse = {
  data: any;
  username: string;
  roles: string[];
  accessToken: string;
};


export function userLogin(data: LoginRequest) {
  return service({
    url: "/login",
    method: "POST",
    data,
  });
}

//  获取所有的用户
export function getUserList(data) {
  return service({
    url: "/getUserList",
    method: "get",
    data,
  });
}