封装网络请求，让前端开发更高效！！！-CSDN博客

本文链接：https://blog.csdn.net/qq_63144902/article/details/147724009

前言

在前端开发中，网络请求是与后端交互的常见操作。然而，直接使用原生的 XMLHttpRequest 或 fetch API 会面临代码冗余、难以维护等问题。为了提高开发效率和代码的可维护性，我们通常会使用一些封装好的请求库，比如 axios。本文将介绍如何封装一个基于 axios 的网络请求工具类，并展示其在实际项目中的应用。本篇文章的部分代码参考了 CoderWhy 老师的代码实现，感谢他的分享和启发。

为什么需要封装网络请求

在实际开发中，直接使用 axios 或其他请求库虽然方便，但仍然存在一些问题：

重复代码：每次发起请求时，都需要手动设置 baseURL、timeout 等配置，代码冗余。
错误处理复杂：请求失败时，需要在每个请求中单独处理错误，不利于统一管理。
扩展性差：如果需要添加全局的请求拦截器或响应拦截器，直接使用 axios 会比较麻烦。

为了解决这些问题，我们可以封装一个网络请求工具类，将这些通用逻辑集中管理。

封装网络请求工具类

接下来，我们将通过一个简单的例子，展示如何封装一个基于 axios 的网络请求工具类。

1. 安装依赖

首先，确保你已经安装了 axios。如果还没有安装，可以通过以下命令安装：

npm install axios

2. 创建配置文件

在项目中创建一个 config.js 文件，用于存放请求的基础配置，例如 baseURL 和 timeout：

// config.js
const baseURL = "http://your-api-base-url/api"; // 替换为你的API基础路径
const TIMEOUT = 5000;

export { baseURL, TIMEOUT };

3. 封装请求工具类

创建一个 HYRequest.js 文件，用于封装网络请求工具类：

JavaScript

复制

// HYRequest.js
import axios from "axios";
import { baseURL, TIMEOUT } from "./config";

class HYRequest {
  constructor(baseURL) {
    this.instance = axios.create({
      baseURL,
      timeout: TIMEOUT,
    });
  }

  request(config) {
    return new Promise((resolve, reject) => {
      this.instance
        .request(config)
        .then((res) => {
          resolve(res.data);
        })
        .catch((err) => {
          console.log("request err:", err);
          reject(err);
        });
    });
  }

  get(config) {
    return this.request({ ...config, method: "get" });
  }

  post(config) {
    return this.request({ ...config, method: "post" });
  }
}

export default new HYRequest(baseURL);

4. 使用封装的请求工具类

在项目中，可以直接导入封装好的请求工具类，并使用它发起请求。例如：

// 使用封装的请求工具类
import request from "./HYRequest";

// 发起 GET 请求
request.get({
  url: "/users",
}).then((data) => {
  console.log("GET 请求返回的数据：", data);
}).catch((err) => {
  console.error("GET 请求失败：", err);
});

// 发起 POST 请求
request.post({
  url: "/login",
  data: {
    username: "admin",
    password: "123456",
  },
}).then((data) => {
  console.log("POST 请求返回的数据：", data);
}).catch((err) => {
  console.error("POST 请求失败：", err);
});

封装的优势

通过封装网络请求工具类，我们获得了以下优势：

代码简洁：封装后，发起请求的代码更加简洁，减少了重复代码。
统一配置：所有请求的配置（如 baseURL、timeout）都集中管理，便于修改和维护。
统一错误处理：请求失败时，可以在封装的工具类中统一处理错误，避免在每个请求中重复处理。
扩展性强：可以通过添加请求拦截器和响应拦截器，实现全局的请求和响应逻辑处理。

进一步优化

虽然上述封装已经满足了基本需求，但还可以通过以下方式进一步优化：

添加请求拦截器和响应拦截器

请求拦截器可以在请求发送前对请求头、请求参数等进行统一处理。
响应拦截器可以在响应返回后对数据进行统一处理，例如统一处理错误码。

示例代码如下：

JavaScript

复制

// HYRequest.js
this.instance.interceptors.request.use(
  (config) => {
    // 在请求发送前，可以在这里添加统一的请求头等操作
    config.headers["Authorization"] = "Bearer your-token";
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

this.instance.interceptors.response.use(
  (response) => {
    // 对响应数据进行统一处理
    return response;
  },
  (error) => {
    // 统一处理响应错误
    console.error("响应错误：", error);
    return Promise.reject(error);
  }
);