axios二次封装

游戏三昧的木笔 / 2023-06-07 / 原文

目的：
　　1. 使用请求拦截器，可以在请求拦截器中处理一些业务（开始进度条、请求头携带公共参数）
　　2. 使用响应拦截器，可以在响应拦截器中处理一些业务（进度条结束、简化服务器返回的数据、处理http网络错误）

1. 新建utils文件夹，新建request.ts

// 进行axios二次封装：使用请求与响应拦截器
import axios from "axios";
// 使用了element的消息提示插件
import ElMessage from "element-plus";
// 第一步：利用axios对象的create方法，创建axios实例(其他配置：基础路径、超时的时间等)
let request = axios.create({
  // 基础路径
  baseURL: import.meta.env.VITE_APP_BASE_API, // 基础路径上携带/api
  timeout: 5000 // 超时设置，5秒之内没有响应，全部视为失败请求
});
// 第二步：request实例添加请求与响应拦截器:一个回调方法
request.interceptors.request.use((config) => {
  // config配置对象，headers属性请求头，经常给服务器端携带公共参数
  // 返回配置对象
  return config;
});
// 第三步：响应拦截器:有两个回调方法，一个成功一个失败
request.interceptors.response.use(
  (response) => {
    // 成功回调
    // 简化数据
    return response.data;
  },
  (error) => {
    // 失败回调：处理http网络错误
    // 定义一个变量：存储网络错误信息
    let message = "";
    // http状态码
    let status = error.response.status;
    switch (status) {
      case 401:
        message = "TOKEN过期";
        break;
      case 403:
        message = "无权访问";
        break;
      case 404:
        message = "请求地址错误";
        break;
      case 500:
        message = "服务器出现问题";
        break;
      default:
        message = "网络出现问题";
        break;
    }
    // 利用element提供的组件提示错误信息
    ElMessage({
      type: "error",
      message
    });
    // 返回失败的Promise对象终结Promise
    return Promise.reject(error);
  }
);

// 第四步：对外暴露
export default request;

2. 可选择在App.vue中进行测试

<template>
  <div>
    <h1>测试axios二次封装</h1>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { onMounted } from "vue";
// 测试：组件挂载完毕之后发送一个请求
onMounted(() => {
  request({
    url: "/user/login",
    method: "post",
    data: {
      userName: "admin",
      password: "123123"
    }
  }).then((res: any) => {
    console.log(res);
  });
});
</script>
<style scoped lang="scss"></style>