0-1 搭建 vue3.0+vite+ts+less 脚手架2——封装axios

封装 axios

-在 src 文件下添加 api 文件,定义接口
-在 http 文件下添加 status.ts,收集所有的状态码

    |- src/        # 项目资源
        |- assets/    # 经过打包的静态资源
        |- components/    # 通用组件
        |- styles/    # 项目通用样式
        |- api/    # 定义接口
            |- user.ts/ # 定义user接口
        |- http/    #  axios封装函数
            |- requtest.ts/ # axios封装
            |- status.ts/ # 状态码
        |- App.vue  # 项目的主组件
        |- main.ts    # 入口ts文件

/src/http/status.ts

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

/src/http/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
    }
}


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) {
    return response.data

  }
  ElMessage({
    message: getMessageInfo(response.status),
    type: 'error'
  })
  return response.data

}, (error:any) => {
    const {response}=error;
    if (response) {
        ElMessage({
            message: getMessageInfo(response.status),
            type: 'error',
        });
        return Promise.reject(response.data)
    }
    ElMessage({
        message: '网络连接异常,请稍后再试!',
        type: 'error',
    });
});

// 此处相当于二次响应拦截
// 为响应数据进行定制化处理
const requestInstance = <T = any>(config: AxiosRequestConfig): Promise<T> => {
    const conf = config;
    return new Promise((resolve, reject) => {
        service.request<any, AxiosResponse<BaseResponse>>(conf).then((res: AxiosResponse<BaseResponse>) => {
            const data = res.data; // 如果data.code为错误代码返回message信息
            if (data.code != 0) {
                ElMessage({
                    message: data.message,
                    type: 'error',
                });
                reject(data.message);
            } else {
                ElMessage({
                    message: data.message,
                    type: 'success',
                }); // 此处返回data信息 也就是 api 中配置好的 Response类型
                resolve(data.data as T);
            }
        });
    });
};
export function get<T = any, U = any>(config: AxiosRequestConfig, url: string, parms?: U): Promise<T> {
    return requestInstance({ ...config, url, method: 'GET', params: parms });
}
export function post<T = any, U = any>(config: AxiosRequestConfig, url: string, data: U): Promise<T> {
    return requestInstance({ ...config, url, method: 'POST', data: data });
}

export function put<T = any, U = any>(config: AxiosRequestConfig, url: string, parms?: U): Promise<T> {
    return requestInstance({ ...config, url, method: 'PUT', params: parms });
}
export function del<T = any, U = any>(config: AxiosRequestConfig, url: string, data: U): Promise<T> {
    return requestInstance({ ...config, url, method: 'DELETE', data: data });
}
// 一般的后端返回的数据结构
// {
//     'code': 1,
//     'message': '成功',
//     'data': {
//         'id': 1,
//         'name': '张三',
//         'age': 18,
//         'sex': 1,
//         'address': '北京市',
//         'createTime': '2021-08-30 15:49:16',
//         'updateTime': '2021-08-30 15:49:16',
//         'deleteTime': null,
//         'createBy': 1,
//         'updateBy': 1,
//     }
// }

/src/api/user.ts

import { post, get } from "@/http/request";

export type LoginRequest = {
  username: string;
  password: string;
};
// 刷新登录信息需要的参数
export type reLoginRequest = {
  accessToken: string;
};
export type LoginResponse = {
  username: string;
  roles: string[];
  accessToken: string;
};
// 定义的接口
export const userLogin = async (data?: LoginRequest) => {
  return post<LoginResponse>({}, "/login", data);
};

export const refreshUserInfo = async (data?: reLoginRequest) => {
  return post<LoginResponse>({}, "/getUserInfo", data);
};