封装Axios请求

之前学习Axios的时候一直是懵懵懂懂，今天有时间好好捋一捋这个Axios请求是怎么个回事。话不多说，我们上代码

// 在项目的utils文件夹下新建一个request.ts文件
import axios, { AxiosResponse } from "axios";
import { ElLoading, ElMessage } from "element-plus";

const service = axios.create({
// 根据不同的环境，配值不同的路径 url = base url + request url
  baseURL: import.meta.env.VITE_APP_BASE_API as string, 
// 请求时间
  timeout: 600000
});
let loadingInstance: any;
// 请求拦截
service.interceptors.request.use(
  (config: any) => {
// 没有token时的默认请求头
    config.headers = {
      ...config.headers,
    };
// 发送请求时带上token，一般这里会是一个方法
   const token = 'api'
// 如果有token，给请求头赋值
    if (token) {
      config.headers = {
        ...config.headers,
        Authorization: "Bearer " + getToken(),
      };
    }
    if (config.loading) {
// 发送请求给页面一个loading效果
      loadingInstance = ElLoading.service({
        lock: true,
        text: "请求中",
      });
    }

    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);
// 响应拦截
service.interceptors.response.use(
  (response: AxiosResponse<any>) => {
    const res = response.data;
// 关闭页面的loading效果
    loadingInstance?.close();
// 如果返回的格式是blob格式（用于转成pdf或者xls）
    if (response.config.responseType == "blob") {
      return res;
    } else if (res.code === 401) {
// 如果401，说明token过期，让用户重新登录
       'xxx' // 退出登录方法
      ElMessage.closeAll();
      ElMessage.error(res.msg);
      return Promise.reject(new Error(res.msg || "Error"));
    } else if (res.code !== 200) {
      ElMessage.closeAll();
      ElMessage.error(res.msg);
      throw new Error(res.msg || "Error");
    }
    return res;
  },
  (error: any) => {
    if (error.response) {
      loadingInstance?.close();
      throw { statusCode: 500, message: '服务器异常' }
    } 
    return Promise.reject(error);
  }
);

// 最后将文件导出
export default service;

// 在项目的api文件夹下新建一个user.ts文件

// 导入上面那个文件
import request from "@/utils/request";

export function getUserInfo(id: number) {
  return request({
    url: "/user" + id,
    method: "get",
  })
}

这样就完成了

最后

感谢你的阅读~

如果你有任何的疑问欢迎您在后台私信，我们一同探讨学习！

如果觉得这篇文章对你有所帮助，点赞、在看是最大的支持！