Vue3 Axios 实现自动化 API 配置详解

背景

在Vue项目中，我们经常需要向后端API接口发起请求来获取数据或者提交表单。Axios是一种流行的基于Promise的HTTP库，它可以帮助我们在Vue中发起请求。

当项目较大时，我们需要管理大量的API请求，每个API都有不同的地址、请求方式、请求参数等。因此，我们需要对Axios进行封装，以便于在项目中统一管理API请求。本攻略将详细讲解如何在Vue3项目中使用Axios并自动化配置API。

环境准备

在Vue3项目中使用Axios需要安装axios库，可以通过npm进行安装：

npm install axios

Axios封装

为了方便管理API请求，我们需要对Axios进行封装。具体来说，我们需要实现以下功能：

• 创建Axios实例
• 记录请求的时间
• 自动添加Authorization头信息
• 自动转换请求参数或响应数据
• 处理请求错误

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API_URL,
  timeout: 5000,
});

// 记录请求的开始时间
service.interceptors.request.use(config => {
  config.startTime = new Date().getTime();
  return config;
}, error => {
  console.error(error);
  return Promise.reject(error);
});

// 添加Authorization头信息
service.interceptors.request.use(config => {
  if (localStorage.getItem('token')) {
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  }
  return config;
}, error => {
  console.error(error);
  return Promise.reject(error);
});

// 自动转换请求参数或响应数据
service.interceptors.request.use(config => {
  if (config.method === 'post') {
    const contentType = config.headers['Content-Type'];
    if (contentType && contentType.startsWith('application/x-www-form-urlencoded')) {
      config.transformRequest = [function (data) {
        let ret = '';
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
        }
        return ret.slice(0, -1);
      }];
    } else if (contentType && contentType.startsWith('application/json')) {
      config.transformRequest = [function (data) {
        return JSON.stringify(data);
      }];
    }
  }
  return config;
}, error => {
  console.error(error);
  return Promise.reject(error);
});

service.interceptors.response.use(response => {
  const endTime = new Date().getTime();
  response.duration = endTime - response.config.startTime;
  return response.data;
}, error => {
  console.error(error);
  return Promise.reject(error);
});

export default service;

以上代码中，我们创建了一个名为service的Axios实例，并对其添加了请求拦截器和响应拦截器。这些拦截器可以实现自动添加Authorization头信息、记录请求时间等功能。在出现请求错误时，我们通过reject()函数把错误传递给调用方。

API 配置自动化

当我们有很多的API请求需要管理时，我们可以通过自动化配置从而减轻手动配置的工作量。我们可以为每个API请求定义一个配置项，其中包含请求的地址、请求方式、请求参数等信息。然后，我们可以通过读取这些配置项自动化生成API请求。

import axios from './axios.js';

const apiConfigs = [
  {url: '/users/', method: 'get'},
  {url: '/users/', method: 'post'},
];

const apis = {};

apiConfigs.forEach(config => {
  const {url, method} = config;
  apis[`${method}${url}`] = (data) => {
    return axios({
        method,
        url,
        data,
      });
  };
});

export default apis;

以上代码中，我们定义了一个名为apiConfigs的数组，其中包含不同的API请求配置项。对于每个配置项，我们将其方法和URL结合起来作为键名，然后将方法封装到apis对象中。通过这种方式，我们可以通过访问apis对象来调用任意API请求。

示例说明

示例1：获取用户信息

对于一个获取用户信息的API请求，我们可以通过以下方式来自动生成API：

{
  url: '/users/',
  method: 'get',
}

我们仅需要在apiConfigs数组中添加上述配置，然后即可通过以下代码来访问API：

import apis from './apis.js';

apis.get/users/().then(res => {
  console.log(res);
});

示例2：创建用户

对于一个创建用户的API请求，我们可以通过以下方式来自动生成API：

{
  url: '/users/',
  method: 'post',
}

我们同样只需要将上述配置添加到apiConfigs数组中并将数据传递给api即可：

import apis from './apis.js';

const data = {
  name: 'Tom',
  age: 20,
};

apis.post/users/().then(res => {
  console.log(res);
});