vue+ts下对axios的封装实现

下面就详细讲解“vue+ts下对axios的封装实现”的完整攻略：

一、安装Axios

首先，在项目根目录下执行以下命令安装axios和@types/axios：

npm install axios @types/axios --save

安装完成后，在vue项目中引入axios：

import Axios from 'axios';

二、创建axios实例

我们可以通过自定义配置来创建axios实例。

在src/api目录下，新建Api.ts文件。在文件中通过axios.create()方法来创建一个axios实例，然后对它进行一些自定义设置。

import Axios, { AxiosInstance } from 'axios';

const api: AxiosInstance = Axios.create({
  timeout: 10000, //超时时间
  baseURL: '/api',
  headers: {
    'Content-Type': 'application/json; charset=UTF-8',
    //其他头部信息...
  }
});

export default api;

我们设置了超时时间、基础URL、请求头等信息。

三、定义接口请求方法

在src/api目录下，创建一个ApiConfig.ts文件，并在文件中定义所有的接口请求方法。

import { AxiosResponse, AxiosError } from 'axios';
import api from './Api';

interface Result {
  code: number;
  data?: any;
  message?: string;
}

class ApiConfig {
  public static post(url: string, data: any): Promise<Result> {
    return new Promise((resolve, reject) => {
      api.post(url, data)
        .then((response: AxiosResponse<Result>) => {
          resolve(response.data);
        })
        .catch((error: AxiosError) => {
          reject(error.message);
        });
    });
  }

  public static get(url: string, params?: any): Promise<Result> {
    return new Promise((resolve, reject) => {
      api.get(url, { params: params })
        .then((response: AxiosResponse<Result>) => {
          resolve(response.data);
        })
        .catch((error: AxiosError) => {
          reject(error.message);
        });
    });
  }
}

export default ApiConfig;

如上述代码所示，我们定义了两个方法：post和get，通过访问api实例，并返回Promise实例来执行我们的请求。

四、调用Api

我们可以在Vue组件中直接使用ApiConfig的post和get方法，来调用我们所定义的接口请求方法。一个简单的例子如下：

import { Component, Vue } from 'vue-property-decorator';
import ApiConfig from '@/api/ApiConfig';

@Component({})
export default class HelloWorld extends Vue {
  private async postRequest(): Promise<void> {
    try {
      const response = await ApiConfig.post('/some-url', { data: 'some data' });
      console.log('response:', response);
    } catch (error) {
      console.error('error:', error);
    }
  }

  private async getRequest(): Promise<void> {
    try {
      const response = await ApiConfig.get('/some-url', { params: { data: 'some data' } });
      console.log('response:', response);
    } catch (error) {
      console.error('error:', error);
    }
  }
}

五、使用示例

示例1：获取用户信息

import { AxiosResponse, AxiosError } from 'axios';
import api from '@/api/Api';

interface User {
  username: string;
  password: string;
}

interface Result {
  code: number;
  data?: User;
  message?: string;
}

class UserApi {
  public static getUser(id: number): Promise<Result> {
    return new Promise((resolve, reject) => {
      api.get(`/users/${id}`)
        .then((response: AxiosResponse<Result>) => {
          resolve(response.data);
        })
        .catch((error: AxiosError) => {
          reject(error.message);
        });
    });
  }
}

export default UserApi;

在Vue组件中使用示例：

import { Component, Vue } from 'vue-property-decorator';
import UserApi from '@/api/UserApi';

@Component({})
export default class UserDetail extends Vue {
  private userId: number = 1;
  private user: User | undefined = undefined;

  private async mounted() {
    try {
      const response = await UserApi.getUser(this.userId);
      if (response.code === 200) {
        this.user = response.data;
      } else {
        console.error('failed to get user');
      }
    } catch (error) {
      console.error('failed to get user', error);
    }
  }
}

示例2：添加新用户

import { AxiosResponse, AxiosError } from 'axios';
import api from '@/api/Api';

interface User {
  username: string;
  password: string;
}

interface Result {
  code: number;
  data?: any;
  message?: string;
}

class UserApi {
  public static addUser(user: User): Promise<Result> {
    return new Promise((resolve, reject) => {
      api.post(`/users`, user)
        .then((response: AxiosResponse<Result>) => {
          resolve(response.data);
        })
        .catch((error: AxiosError) => {
          reject(error.message);
        });
    });
  }
}

export default UserApi;

在Vue组件中使用示例：

import { Component, Vue } from 'vue-property-decorator';
import UserApi from '@/api/UserApi';

@Component({})
export default class CreateUser extends Vue {
  private user: User = { username: '', password: '' };

  private async saveUser(): Promise<void> {
    try {
      const response = await UserApi.addUser(this.user);
      if (response.code === 200) {
        console.log('success');
      } else {
        console.error('failed to add user');
      }
    } catch (error) {
      console.error('failed to add user', error);
    }
  }
}

以上就是“vue+ts下对axios的封装实现”的完整攻略。