Axios 为 Vue.js 3 项目添加全局配置，让 HTTP 请求更轻松！

2023-05-22 14:10:34

在 Vue.js 3 中高效处理 HTTP 请求：利用 Axios 实例的全局配置

引言

在现代前端开发中，HTTP 请求处理至关重要。Axios 作为一款强大而灵活的 HTTP 客户端库，能够大幅简化和优化这一过程。而在 Vue.js 3 项目中，全局配置 Axios 实例可以进一步提升效率，实现跨应用程序的请求处理一致性。

配置 Axios 实例

在 Vue.js 3 应用中，通过以下步骤配置 Axios 实例：

安装 Axios：

npm install axios

创建 Axios 实例：

import axios from 'axios';

// 创建 Axios 实例
const axiosInstance = axios.create({
  // 设置 baseURL，方便管理所有请求的根 URL
  baseURL: 'http://localhost:3000/api/',
  // 设置超时时间，超过指定时间未得到响应则抛出错误
  timeout: 10000,
  // 设置请求头
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
});

import { createApp } from 'vue';
import axiosInstance from './axios';

const app = createApp({});

// 将 Axios 实例注册到 Vue.js 3 应用中
app.config.globalProperties.$axios = axiosInstance;

全局配置的优势

全局配置 Axios 实例具有以下优势：

代码可重用性： 共享请求和响应处理逻辑，提高代码的可重用性。
维护方便： 集中修改，降低维护难度。
错误处理一致性： 统一错误处理方式，提升应用稳定性。
状态码处理统一性： 统一处理常见状态码（如 401、500），增强用户体验。

实例应用：统一处理 401 和 500 状态码

以下示例展示了如何在全局配置中统一处理 401 和 500 状态码：

// 响应拦截器，处理所有响应
axiosInstance.interceptors.response.use(
  (response) => {
    // 401 未授权
    if (response.status === 401) {
      window.location.href = '/login';
    }
    // 500 内部服务器错误
    if (response.status === 500) {
      alert('服务器内部错误，请稍后再试！');
    }
    return response;
  },
  (error) => {
    // 请求失败
    alert('请求失败，请检查网络连接或联系管理员！');
    return Promise.reject(error);
  }
);