Vue3 + Axios + TypeScript 简要封装的实现

引入Axios

• npm - npm install axios -S
• yarn - yarn add axios -S

编写request.js 实现axios实例

/**
 * axios实例
 */
import axios from 'axios';
import type { AxiosResponse } from 'axios';

// 定义一个响应interface，建议放置公共声明文件
interface ApiResult<T> {
  // 状态码
  code: number;
  // 状态信息
  message?: string;
  // 返回数据
  data?: T;
}

const service = axios.create({
  baseURL: import.meta.env.VITE_API_URL as string // 取得env配置的基础路径
});

// 添加请求拦截器
service.interceptors.request.use(
  (config) => {
    // todo 前置实现，比例前置追加授权头 token等等
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 添加响应拦截器
service.interceptors.response.use(
  (res: AxiosResponse<ApiResult<unknown>>) => {
    // todo 后置处理，比如做登录过期处理
    return res;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default service;

使用

import request from 'path/to/request';

/**
 * 测试
 */
async function login(data) {
  const res = await request.get<ApiResult<unknown>>('/demo', {
      params
  });
  // 成功处理
  if (res.data.code === 0) {
    return res.data.message;
  }
  return Promise.reject(new Error(res.data.message));
}