封装相关视频讲解：

 C语言程序设计入门之环境安装

 DLL动态链接库创建

 C++设计模式：观察者模式的实用工程技术

如何实现“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
  • 1.
步骤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();
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
步骤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);
      });
  }
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

状态图

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

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