一篇文章让你看懂封装Axios

我来为你讲解。

一篇文章让你看懂封装 Axios - 完整攻略

前言

Axios 是一个基于 promise 的 HTTP 请求库，可以用于浏览器以及 Node.js 环境中。由于 Axios 功能强大，使用简单便捷，因此被广泛用作前后端交互的请求库。但是，如果每个请求都是单独的一个函数去处理的，那么代码会变得很冗长，不易维护。因此我们需要封装 Axios。

封装方式

封装 Axios 有很多种方式，以下是常用的几种方式：

方式一：对 Axios 进行二次封装

可以基于 Axios 进行二次封装，将常用的请求方法封装成一个个函数，并在函数内部使用 Axios 进行真正的请求操作。业务代码中只需调用封装后的函数即可。

例如，封装一个 get 请求：

import Axios from 'axios';

function get(url, params) {
  return Axios.get(url, { params });
}

export { get };

方式二：基于 Axios 实现一个 API 类

可以在业务代码中定义一个 API 类，该类封装了各种业务接口，并在内部使用 Axios 进行请求。在使用 API 类的时候，直接调用定义好的方法即可。

例如：

import Axios from 'axios';

const BASE_URL = 'https://xxx.xxx.com';

class Api {
  constructor() {
    this.axios = Axios.create({
      baseURL: BASE_URL,
      timeout: 30000,
    });
  }

  async getProductList() {
    const response = await this.axios.get('/product/list');
    return response.data;
  }

  async createProduct(body) {
    const response = await this.axios.post('/product', body);
    return response.data;
  }

  // ...
}

export { Api };

方式三：基于 Axios 实现一个 Request 类

可以在业务代码中定义一个 Request 类，该类封装了各种业务接口，并在内部使用 Axios 进行请求。在使用 Request 类的时候，调用该类的 request 方法，并传入 options 对象，options 对象中封装了请求所需的 url、method、params、data 等信息。

例如：

import Axios from 'axios';

const BASE_URL = 'https://xxx.xxx.com';

class Request {
  constructor() {
    this.axios = Axios.create({
      baseURL: BASE_URL,
      timeout: 30000,
    });
  }

  async request(options) {
    const { url, method = 'get', params = {}, data = {} } = options;

    const response = await this.axios.request({
      url,
      method,
      params,
      data,
    });

    return response.data;
  }

  async getProductList() {
    const response = await this.request({ url: '/product/list' });
    return response;
  }

  async createProduct(body) {
    const response = await this.request({ url: '/product', method: 'post', data: body });
    return response;
  }

  // ...
}

export { Request };

示例

以上是封装 Axios 的三种常见方式，接下来对三种方式分别进行示例说明。

示例一：封装 get 请求

以方式一为例，我们来看一个案例。首先，我们定义如下的 getProductList 函数：

import Axios from 'axios';

function getProductList(params) {
  return Axios.get('/product/list', { params });
}

export { getProductList };

在项目中，我们可以这样使用定义好的 getProductList 函数：

import { getProductList } from './api';

async function main() {
  const productList = await getProductList({ page: 1, size: 10 });

  console.log(productList);
}

main();

示例二：基于 Axios 实现 API 类

以方式二为例，我们来看一个案例。首先，我们定义一个名为 Api 的类，这个类内部封装了 getProductList 和 createProduct 等方法：

import Axios from 'axios';

const BASE_URL = 'https://xxx.xxx.com';

class Api {
  constructor() {
    this.axios = Axios.create({
      baseURL: BASE_URL,
      timeout: 30000,
    });
  }

  async getProductList() {
    const response = await this.axios.get('/product/list');
    return response.data;
  }

  async createProduct(body) {
    const response = await this.axios.post('/product', body);
    return response.data;
  }
}

export { Api };

在项目中，我们可以这样使用定义好的 Api 类：

import { Api } from './api';

async function main() {
  const api = new Api();

  const productList = await api.getProductList();

  const created = await api.createProduct({
    name: '测试商品',
    price: 100,
    // ...
  });

  console.log(productList, created);
}

main();

示例三：基于 Axios 实现 Request 类

以方式三为例，我们来看一个案例。首先，我们定义一个名为 Request 的基于 Axios 的请求类，这个类内部封装了 getProductList 和 createProduct 等方法：

import Axios from 'axios';

const BASE_URL = 'https://xxx.xxx.com';

class Request {
  constructor() {
    this.axios = Axios.create({
      baseURL: BASE_URL,
      timeout: 30000,
    });
  }

  async request(options) {
    const { url, method = 'get', params = {}, data = {} } = options;

    const response = await this.axios.request({
      url,
      method,
      params,
      data,
    });

    return response.data;
  }

  async getProductList() {
    const response = await this.request({ url: '/product/list' });
    return response;
  }

  async createProduct(body) {
    const response = await this.request({ url: '/product', method: 'post', data: body });
    return response;
  }
}

export { Request };

在项目中，我们可以这样使用定义好的 Request 类：

import { Request } from './request';

async function main() {
  const request = new Request();

  const productList = await request.getProductList();

  const created = await request.createProduct({
    name: '测试商品',
    price: 100,
    // ...
  });

  console.log(productList, created);
}

main();

这样，我们就完整的讲解了封装 Axios 的攻略，希望本文对你有所帮助。