Vue项目中axios面向对象封装

2023-09-03 22:47:25

前言

在前端开发中，我们经常会使用axios库来进行网络请求。axios是一个非常强大的库，它提供了许多有用的特性，例如支持多种请求类型、支持发送和接收JSON数据、支持超时设置等。但是，axios的默认使用方式是函数式编程，这使得它在一些情况下使用起来不够方便。

为了解决这个问题，我们可以对axios进行二次封装，使其支持面向对象式的编程。面向对象式的编程是一种更直观、更易读的编程方式，它可以帮助我们更好地组织和维护代码。

面向对象式封装axios

首先，我们创建一个名为Axios的类，并在类上定义一个静态方法create。create方法用于创建一个axios实例，并返回这个实例。

class Axios {
  static create() {
    return axios.create();
  }
}

接下来，我们可以在Axios类上定义各种各样的请求方法，例如post、postJson、get、put、delete等。这些方法都返回一个Promise对象，Promise对象代表着请求的结果。

class Axios {
  static create() {
    return axios.create();
  }

  static post(url, data) {
    return this.create().post(url, data);
  }

  static postJson(url, data) {
    return this.create().post(url, JSON.stringify(data), {
      headers: {
        'Content-Type': 'application/json'
      }
    });
  }

  static get(url) {
    return this.create().get(url);
  }

  static put(url, data) {
    return this.create().put(url, data);
  }

  static delete(url) {
    return this.create().delete(url);
  }
}

拦截器

拦截器用于拦截请求和响应，我们可以通过拦截器来做一些额外的操作，例如添加请求头、处理响应数据等。

class Axios {
  // 省略其他代码

  static interceptors = {
    request: [],
    response: []
  };

  static addRequestInterceptor(interceptor) {
    this.interceptors.request.push(interceptor);
  }

  static removeRequestInterceptor(interceptor) {
    const index = this.interceptors.request.indexOf(interceptor);
    if (index !== -1) {
      this.interceptors.request.splice(index, 1);
    }
  }

  static addResponseInterceptor(interceptor) {
    this.interceptors.response.push(interceptor);
  }

  static removeResponseInterceptor(interceptor) {
    const index = this.interceptors.response.indexOf(interceptor);
    if (index !== -1) {
      this.interceptors.response.splice(index, 1);
    }
  }
}

示例

下面是一个简单的示例，演示如何使用这个封装后的axios：

import Axios from './axios';

Axios.post('http://localhost:3000/api/users', {
  name: 'John Doe',
  email: 'john.doe@example.com'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.log(error);
});