Vue开发的福音：axios二次封装，纵享请求与响应拦截

2022-12-06 08:37:25

Vue.js 和 Axios：前端开发的黄金搭档

在前端开发的世界里，Vue.js 和 Axios 是两大不可或缺的利器。Vue.js 以其简洁性和响应性著称，而 Axios 则为 HTTP 请求和响应提供了强大的支持。本文将深入探讨如何通过二次封装 Axios，进一步提升 Vue.js 开发的效率。

Axios 二次封装：掌控 HTTP 交互

想象一下，你正在开发一个 Vue.js 应用程序，需要频繁地与服务器交互。手动编写每个 HTTP 请求可能是一项繁琐且容易出错的任务。这就是 Axios 二次封装的用武之地。

通过二次封装 Axios，我们可以轻松地定义请求头、请求参数、超时时间和错误处理逻辑，而无需每次都重复编写这些代码。这不仅可以简化开发流程，还可以减少错误的发生。

请求拦截器：掌控请求的方方面面

请求拦截器允许我们在每个 HTTP 请求发出之前对其进行拦截和修改。我们可以利用它来：

添加或修改请求头
添加或修改请求参数
设置请求超时
拦截并处理请求错误

举个例子，我们可以创建一个请求拦截器，为所有请求自动添加一个授权令牌：

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
});

响应拦截器：驾驭响应的力量

与请求拦截器类似，响应拦截器允许我们在每个 HTTP 响应返回后对其进行拦截和修改。我们可以利用它来：

拦截并处理响应错误
转换或格式化响应数据
根据响应数据确定后续操作

例如，我们可以创建一个响应拦截器，将所有响应数据转换成 JSON 格式：

axios.interceptors.response.use((response) => {
  if (response.headers['Content-Type'] === 'application/json') {
    return response.json();
  }
  return response;
});

示例代码：实践出真知

为了进一步说明 Axios 二次封装的用法，让我们看一个实际的 Vue.js 示例。假设我们有一个应用程序，需要获取当前用户的信息：

import axios from 'axios';
import axiosInterceptor from 'axios-interceptor';

const instance = axios.create();
axiosInterceptor(instance);

const getUserInfo = async () => {
  try {
    const response = await instance.get('/api/users/me');
    return response.data;
  } catch (error) {
    console.error('Error fetching user info:', error);
    throw error;
  }
};