Vue3 与 TypeScript 如何封装 Axios 并使用 Mock.js

在 Vue3 项目中，结合 TypeScript 进行开发能极大地提升代码的可维护性和类型安全性。而 Axios 作为常用的 HTTP 库，对其进行合理封装能让代码更加优雅。Mock.js 可以模拟数据，方便开发与测试。下面就来详细介绍如何实现这些功能。

安装必要的依赖。使用 npm 分别安装 axios 和 mockjs：npm install axios mockjs --save。

接着进行 Axios 的封装。在项目中创建一个 api 文件夹，在其中新建 axios.ts 文件。引入 Axios 并创建实例：

import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
});

这里设置了基础 URL 和超时时间。然后，为了处理请求拦截和响应拦截，可以这样添加代码：

service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头，例如 token
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code!== 200) {
      // 处理错误情况
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    return Promise.reject(error);
  }
);

至此，Axios 封装完成。

接下来使用 Mock.js 模拟数据。在 api 文件夹下创建 mock 文件夹，新建 user.ts 文件。例如模拟获取用户列表的接口：

import Mock from'mockjs';

const data = Mock.mock({
  'list|10': [
    {
      id: '@id',
      name: '@name',
      age: '@integer(18, 60)'
    }
  ]
});

Mock.mock('/api/user/list', 'get', data);

在组件中使用封装的 Axios 时，先引入封装的 service：

import { defineComponent } from 'vue';
import service from '@/api/axios';

export default defineComponent({
  setup() {
    const getUserList = async () => {
      try {
        const res = await service.get('/api/user/list');
        console.log(res);
      } catch (error) {
        console.error(error);
      }
    };
    getUserList();
  }
});

通过以上步骤，我们成功在 Vue3 和 TypeScript 项目中封装了 Axios 并使用 Mock.js 模拟数据，为开发和测试带来了极大的便利。