如何实现“vue ts 封装axios”

整体流程

步骤 内容
1 安装axios和@types/axios依赖
2 创建封装axios的service文件
3 编写封装axios的service代码
4 在Vue组件中使用封装后的axios

步骤说明

步骤1：安装axios和@types/axios依赖

在终端中运行以下命令安装axios和@types/axios依赖：

npm install axios @types/axios --save

步骤2：创建封装axios的service文件

在项目中创建一个services文件夹，并在其中创建一个axiosService.ts文件。

步骤3：编写封装axios的service代码

在axiosService.ts文件中编写以下代码：

import axios, { AxiosInstance, AxiosResponse, AxiosError } from 'axios';

class AxiosService {
  private axiosInstance: AxiosInstance;

  constructor() {
    this.axiosInstance = axios.create({
      baseURL: '
      timeout: 5000,
    });

    this.axiosInstance.interceptors.request.use((config) => {
      // 在发送请求之前做些什么
      return config;
    }, (error) => {
      // 对请求错误做些什么
      return Promise.reject(error);
    });

    this.axiosInstance.interceptors.response.use((response) => {
      // 对响应数据做些什么
      return response;
    }, (error) => {
      // 对响应错误做些什么
      return Promise.reject(error);
    });
  }

  public get<T>(url: string): Promise<AxiosResponse<T>> {
    return this.axiosInstance.get<T>(url);
  }

  public post<T>(url: string, data: any): Promise<AxiosResponse<T>> {
    return this.axiosInstance.post<T>(url, data);
  }
}

export default new AxiosService();

步骤4：在Vue组件中使用封装后的axios

在Vue组件中引入封装后的axiosService，并调用get或post方法发送请求。

import { defineComponent } from 'vue';
import axiosService from './services/axiosService';

export default defineComponent({
  mounted() {
    axiosService.get('/data')
      .then((response) => {
        console.log(response.data);
      })
      .catch((error) => {
        console.error(error);
      });
  }
});

状态图

stateDiagram
    [*] --> 安装axios和@types/axios依赖
    安装axios和@types/axios依赖 --> 创建封装axios的service文件
    创建封装axios的service文件 --> 编写封装axios的service代码
    编写封装axios的service代码 --> 在Vue组件中使用封装后的axios
    在Vue组件中使用封装后的axios --> [*]

通过以上步骤，你就完成了“vue ts 封装axios”的实现过程。希望对你有所帮助！