axios 二次封装和 OpenAPI 的使用

基本使用

1. 使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)

2. 使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)

根目录下创建 utils/request.ts

// axios 二次封装，使用响应和请求拦截器
import axios from 'axios'
import { ElMessage } from 'element-plus'
import {useTokenStore} from "@/stores/token.js";
import router from '@/router/index.js'
// 一，使用create方法，创建axios实例（配置：基础路径，超时时间）
let instance= axios.create({
  // 基础路径 会携带/api前缀 相当于当前源拼接 baseURL 
  // 如果当前源是 5173，那么拼接后完整路径就是 http://localhost:5173/api
  // baseURL = '/api';  会与反向代码相对应，解决跨域问题
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 超时时间
  timeout: 5000
})
// 二，请求拦截器
instance.interceptors.request.use(config => {
  // config 配置对象，headers属性请求头，给服务器端携带公共参数
  const tokenStore = useTokenStore()
    if (tokenStore.token) {
        config.headers.Authorization = tokenStore.token
    }
  //返回配置对象
  return config
}, error => {
     Promise.reject(error);
})
// 三，响应拦截器
instance.interceptors.response.use(
  result => {
    // 状态码 0 表示成功
    if (result.data.code === 0) {
        return result.data;
    }
    alert(result.data.message || '服务异常')
    return Promise.reject(result.data);
}, (error) => {
  // 失败回调：处理http网络错误
  // 定义变量：存储网络错误信息
  let message = ''
  let status = error.response.status
  switch (status) {
    case 401:
      message = '未授权，请登录（token过期）'
      // router.push('/login')
      break
    case 403:
      message = '无权访问'
      break
    case 404:
      message = '请求地址出错'
      break
    case 500:
      message = '服务器内部错误'
      break
    default:
      message = '网络出现问题'
      break
  }
  ElMessage({
    type: 'error',
    message: message
  })
  return Promise.reject(error)
})

// 对外暴露
export default instance

OpenAPI 的使用

可以结合 openapi 结合 axios 极大提高开发效率。

Next.js 使用客户端和服务端同构渲染，需要选择一个同时支持 Node.js 和浏览器环境的请求库，而 Axios 是支持的。

withCredentials: true 在发请求时携带 Cookie，完成登录。

import axios from "axios";

// 创建 Axios 示例
const myAxios = axios.create({
  baseURL: "http://localhost:8101",
  timeout: 10000,
  withCredentials: true,
});

// 创建请求拦截器
myAxios.interceptors.request.use(
  function (config) {
    // 请求执行前执行
    return config;
  },
  function (error) {
    // 处理请求错误
    return Promise.reject(error);
  },
);

// 创建响应拦截器
myAxios.interceptors.response.use(
  // 2xx 响应触发
  function (response) {
    // 处理响应数据
    const { data } = response;
    // 未登录
    if (data.code === 40100) {
      // 不是获取用户信息接口，或者不是登录页面，则跳转到登录页面
      if (
        !response.request.responseURL.includes("user/get/login") &&
        !window.location.pathname.includes("/user/login")
      ) {
        window.location.href = `/user/login?redirect=${window.location.href}`;
      }
    } else if (data.code !== 0) {
      // 其他错误
      throw new Error(data.message ?? "服务器错误");
    }
    return data;
  },
  // 非 2xx 响应触发
  function (error) {
    // 处理响应错误
    return Promise.reject(error);
  },
);

export default myAxios;

传统情况下，每个请求都要单独编写代码，很麻烦。

推荐使用 OpenAPI 工具，直接自动生成即可：https://www.npmjs.com/package/@umijs/openapi

按照官方文档的步骤，先安装：

npm i --save-dev @umijs/openapi

在 项目根目录 新建 openapi.config.ts，根据自己的需要定制生成的代码：

const { generateService } = require("@umijs/openapi");

generateService({
  requestLibPath: "import request from '@/libs/request'",
  schemaPath: "http://localhost:8101/api/v2/api-docs",
  serversPath: "./src",
});

在 package.json 的 script 中添加 “openapi”: “ts-node openapi.config.ts”。

如果 ts-node 无法运行，改为 node。

执行该命令，可以在 /src/api 目录看到生成的请求代码。

然后测试。