Axios封装技巧：用更好的方式处理HTTP请求

封装 Axios 以提升 Vue.js 中的 HTTP 请求

设置项目基础和 URL

使用 Axios 进行 HTTP 请求时，首先要设置项目的 URL。这确保 Axios 能正确地向服务器发出请求。

import axios from "axios";

// 设置项目 URL
axios.defaults.baseURL = "http://localhost:8080/api";

配置请求拦截器

请求拦截器让我们在发出请求之前对请求进行修改。它用于添加认证信息、设置请求头，或处理其他需要在发送请求前完成的任务。

// 设置请求拦截器
axios.interceptors.request.use(
  config => {
    // 请求发送前执行操作
    return config;
  },
  error => {
    // 处理请求发送错误
    return Promise.reject(error);
  }
);

管理令牌（Token）

在实际项目中，通常需要在请求头中包含令牌进行身份验证。我们可以通过请求拦截器在发送请求时处理令牌。

// 处理请求时令牌管理
axios.interceptors.request.use(
  config => {
    // 如果令牌存在，将其添加到请求头
    if (localStorage.getItem("token")) {
      config.headers["Authorization"] = `Bearer ${localStorage.getItem("token")}`;
    }
    return config;
  },
  error => {
    // 处理请求发送错误
    return Promise.reject(error);
  }
);

配置响应拦截器

响应拦截器让我们在收到服务器响应后对响应进行修改。它用于处理错误、提取数据，或执行其他需要在接收响应后完成的任务。

// 设置响应拦截器
axios.interceptors.response.use(
  response => {
    // 接收响应后执行操作
    return response;
  },
  error => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

处理 401 错误（令牌过期）

在实际项目中，经常会遇到 401 错误（令牌过期）。我们可以通过响应拦截器处理 401 错误，并刷新令牌。

// 处理 401 错误（令牌过期）
axios.interceptors.response.use(
  response => {
    // 接收响应后执行操作
    return response;
  },
  error => {
    // 处理响应错误
    if (error.response.status === 401) {
      // 刷新令牌
      refreshToken()
        .then(() => {
          // 重新发送请求
          return axios(error.config);
        })
        .catch(error => {
          // 处理刷新令牌失败的情况
          return Promise.reject(error);
        });
    } else {
      return Promise.reject(error);
    }
  }
);

结语

通过封装 Axios，我们可以简化 HTTP 请求，提供更强大的功能和更灵活的配置。本文介绍了 Axios 封装时需要考虑的事项，包括 URL 设置、请求和响应拦截器配置，以及令牌和 401 错误处理，帮助你构建更强大的 Vue.js 应用程序。

常见问题解答

1. Axios 封装有哪些好处？
   封裝 Axios 可以簡化 HTTP 請求，提供更強大的功能和更靈活的配置。

2. 如何設置 URL 基礎？
   使用 axios.defaults.baseURL 屬性設定專案的 URL 基礎。

3. 如何處理令牌？
   可以使用請求攔截器在發送請求時處理令牌。

4. 如何處理 401 錯誤？
   可以使用回應攔截器處理 401 錯誤，並刷新令牌。

5. 如何使用 Axios 封裝來優化 Vue.js 應用程式？
   Axios 封裝可以簡化 HTTP 請求，提供更強大的功能和更靈活的配置，有助於構建更健壯的 Vue.js 應用程式。