jcLee95 的个人博客：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
邮箱 ：291148484@163.com
本文地址：https://blog.csdn.net/qq_28550263/article/details/131099244

相关文章：[《flutter 中的 dio 模块用法解析与二次封装》](https://blog.csdn.net/qq_28550263/article/details/131152631](https://blog.csdn.net/qq_28550263/article/details/131152631)

1. 概述

1.1 什么是 axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送异步请求。它是一个流行的 JavaScript 库，旨在简化客户端端与服务器端之间的数据传输过程。Axios 提供了一个简洁而强大的 API，可以轻松地执行各种 HTTP 请求，例如 GET、POST、PUT、DELETE 等。

Axios 具有以下特点和功能：

Axios 是一个功能强大、易于使用且广泛采用的 HTTP 客户端库，可以帮助开发者轻松地与服务器进行数据交互。无论是处理简单的 API 请求还是处理复杂的网络通信，Axios 提供了一套简洁而灵活的工具来满足各种需求。读者可以在以下博文阅览axios中文翻译文档：《axios 文档中文翻译》，地址：https://blog.csdn.net/qq_28550263/article/details/122537980

1.2 关于本文

2. 从 axios 的基本用法开始

2.1 axios 用法简介

2.1.1 安装和引入 axios 模块

npm install axios
# or
yarn add axios
# or
pnpm i axios

安装完成后你就可以如下引入axios：

import axios from 'axios';

2.1.2 发送GET请求

axios.get('/api/data')
  .then((response) => {
    // 处理成功响应
    console.log(response.data);
  })
  .catch((error) => {
    // 处理错误响应
    console.error(error);
  });

2.1.3 发送POST请求

axios.post('/api/data', { /* 数据 */ })
  .then((response) => {
    // 处理成功响应
    console.log(response.data);
  })
  .catch((error) => {
    // 处理错误响应
    console.error(error);
  });

2.2 为什么需要封装axios

尽管可以直接使用axios进行基本的请求，但未封装axios存在以下不便之处：

1. 代码冗余：在每个请求中都需要重复编写请求配置、错误处理等逻辑，导致代码冗余和可读性降低。
2. 配置不一致：如果项目中有多个地方使用axios，每个地方的配置可能不一致，导致代码风格不统一。
3. 缺乏拦截器：未封装的axios没有预定义的请求和响应拦截器，无法方便地统一处理请求和响应的逻辑，如认证、错误处理等。
4. API管理困难：未封装的axios无法方便地管理API接口，容易导致接口定义分散，不易查找和修改。
5. 可扩展性受限：未封装的axios难以进行功能扩展，如添加自定义拦截器、缓存等功能。

综上所述，封装axios可以解决未封装axios的不便之处，提供更好的代码组织、可维护性和可扩展性。通过封装，可以统一配置、提供拦截器处理、方便API管理，并且使代码更加简洁、可读和易于维护。总结起来，封装axios有以下几个原因：

• 代码复用：通过封装，可以将通用的请求逻辑封装成可重用的函数或模块，减少重复代码的编写。
• 可维护性：将axios的配置、拦截器等逻辑封装在一处，方便维护和修改。
• 错误处理：封装可以集中处理请求和响应的错误，提供统一的错误处理机制。
• 接口统一管理：将API接口的定义和管理集中在一处，方便查找和修改。
• 方便扩展：通过封装，可以轻松地扩展axios的功能，比如添加认证、缓存等功能。

3. axios 的封装

当封装axios时，可以采用不同的形式。下面分别介绍函数封装、实例封装和类封装，并给出使用TypeScript编写的具体封装示例代码：

3.1 函数封装方式

函数封装是将常用的请求封装成函数，接收参数并返回Promise对象。

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

/**
 * 发送GET请求
 * @param url 请求URL
 * @param params 请求参数
 * @returns Promise对象，包含响应数据
 */
export function get(url: string, params?: AxiosRequestConfig['params']): Promise<AxiosResponse> {
  return axios.get(url, { params });
}

/**
 * 发送POST请求
 * @param url 请求URL
 * @param data 请求数据
 * @returns Promise对象，包含响应数据
 */
export function post(url: string, data?: any): Promise<AxiosResponse> {
  return axios.post(url, data);
}

// 在Vue组件中使用
import { get, post } from '@/api';

export default {
  methods: {
    fetchData() {
      get('/data')
        .then((response) => {
          // 处理成功响应
        })
        .catch((error) => {
          // 处理错误响应
        });
    },
    postData() {
      post('/data', { /* 数据 */ })
        .then((response) => {
          // 处理成功响应
        })
        .catch((error) => {
          // 处理错误响应
        });
    },
  },
};

3.2 实例封装方式

实例封装是创建axios实例，并设置通用的配置、拦截器等。

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

class ApiClient {
  private instance: AxiosInstance;

  constructor(baseURL: string) {
    this.instance = axios.create({
      baseURL,
      timeout: 5000,
    });

    // 请求拦截器
    this.instance.interceptors.request.use(
      (config) => {
        // 在请求发送前做一些处理
        return config;
      },
      (error) => {
        // 处理请求错误
        return Promise.reject(error);
      }
    );

    // 响应拦截器
    this.instance.interceptors.response.use(
      (response) => {
        // 对响应数据进行处理
        return response.data;
      },
      (error) => {
        // 处理响应错误
        return Promise.reject(error);
      }
    );
  }

  /**
   * 发送GET请求
   * @param url 请求URL
   * @param params 请求参数
   * @returns Promise对象，包含响应数据
   */
  public get(url: string, params?: AxiosRequestConfig['params']): Promise<AxiosResponse> {
    return this.instance.get(url, { params });
  }

  /**
   * 发送POST请求
   * @param url 请求URL
   * @param data 请求数据
   * @returns Promise对象，包含响应数据
   */
  public post(url: string, data?: any): Promise<AxiosResponse> {
    return this.instance.post(url, data);
  }
}

// 在Vue组件中使用
import ApiClient from '@/api';

const api = new ApiClient('https://

api.example.com');

export default {
  methods: {
    fetchData() {
      api.get('/data')
        .then((response) => {
          // 处理成功响应
        })
        .catch((error) => {
          // 处理错误响应
        });
    },
    postData() {
      api.post('/data', { /* 数据 */ })
        .then((response) => {
          // 处理成功响应
        })
        .catch((error) => {
          // 处理错误响应
        });
    },
  },
};

3.3 类封装方式

类封装通过类来封装axios，封装各种请求方法和处理逻辑。例如：

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

class ApiClient {
  private baseURL: string;
  private instance = axios.create({
    timeout: 5000,
  });

  constructor(baseURL: string) {
    this.baseURL = baseURL;

    // 请求拦截器
    this.instance.interceptors.request.use(
      (config) => {
        // 在请求发送前做一些处理
        return config;
      },
      (error) => {
        // 处理请求错误
        return Promise.reject(error);
      }
    );

    // 响应拦截器
    this.instance.interceptors.response.use(
      (response) => {
        // 对响应数据进行处理
        return response.data;
      },
      (error) => {
        // 处理响应错误
        return Promise.reject(error);
      }
    );
  }

  /**
   * 发送GET请求
   * @param url 请求URL
   * @param params 请求参数
   * @returns Promise对象，包含响应数据
   */
  public get(url: string, params?: AxiosRequestConfig['params']): Promise<AxiosResponse> {
    return this.instance.get(this.baseURL + url, { params });
  }

  /**
   * 发送POST请求
   * @param url 请求URL
   * @param data 请求数据
   * @returns Promise对象，包含响应数据
   */
  public post(url: string, data?: any): Promise<AxiosResponse> {
    return this.instance.post(this.baseURL + url, data);
  }
}

// 在Vue组件中使用
import ApiClient from '@/api';

const api = new ApiClient('https://api.xxxxxx.com');

export default {
  methods: {
    fetchData() {
      api.get('/data')
        .then((response) => {
          // 处理成功响应
        })
        .catch((error) => {
          // 处理错误响应
        });
    },
    postData() {
      api.post('/data', { /* 数据 */ })
        .then((response) => {
          // 处理成功响应
        })
        .catch((error) => {
          // 处理错误响应
        });
    },
  },
};

3.4 三种封装方式的比较

上面我们介绍了通过 函数封装、实例封装、类封装 三种封装方式来封装 axios。当然，它们都可以用来封装axios，它们在代码组织和使用上有一些区别。本节我们对这三种方式做一些比较。

总的来说，函数封装方式简单易用，实例封装方式具有一定的可扩展性和灵活性，而类封装方式则提供了最强大的封装能力和代码组织结构。实际开发中具体选择哪种方式可以取决于项目的规模、复杂性，但是一般更多地会取决于团队的开发经验，以及个人的偏好和需求。

4. 弃用 Axios 的思考

4.1 Axios 存在的主要问题

xios是一个常用的JavaScript库，用于在浏览器和Node.js中进行HTTP请求。尽管Axios是一个流行的选择，但它也有一些不足之处：

4.2 一些现成的可选替代方案

替代方案收集中，欢迎在评论区留言推荐

5. Fetch

5.1 Fetch 简介

5.1.1 什么是 Fetch

在过去，前端开发人员通常使用XMLHttpRequest对象来进行网络请求。然而，XMLHttpRequest存在一些问题，比如使用繁琐的接口、不统一的语法和难以处理错误。为了解决这些问题，W3C（World Wide Web Consortium）和Web开发社区共同努力，开发了Fetch API。Fetch是一种现代的Web API，用于在前端中进行网络请求。它提供了一种替代传统XMLHttpRequest（XHR）的方式，以更简单、灵活和统一的方式处理网络通信。Fetch API的设计目标包括：

1. 提供一种简单而强大的方式来进行网络请求。
2. 统一网络请求的接口和语法，使开发人员更容易理解和使用。
3. 支持Promise对象，以便更好地处理异步请求。
4. 提供更灵活的请求和响应处理选项。

5.1.2 Fetch与传统方式的比较

对比使用 XMLHttpRequest

与 XMLHttpRequest 方式相比。Fetch API相对于XMLHttpRequest具有以下优势：

对比使用 axios 模块

与 axios 的比较第三方模块对比：

选择使用Fetch API还是axios取决于具体需求和项目要求。如果希望使用原生的浏览器API并且在现代浏览器中运行，可以考虑使用 Fetch API。如果需要更多的功能扩展、兼容性和数据转换支持，尚且还可以继续使用 axios。

5.1 Fetch 用法

5.2.1 快速入门

使用 Fetch API可以轻松地发起各种类型的HTTP请求并处理响应数据，本节给一个基本的Fetch请求示例：

fetch('https://api.xxxxxx.com/data')
  .then((response: Response) => {
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    return response.json();
  })
  .then((data: any) => {
    console.log(data);
  })
  .catch((error: Error) => {
    console.error('Error:', error);
  });

这个例子中，我们使用 fetch 函数发起了一个 GET 请求，并指定了要请求的 URL。然后，我们使用 Promise 的 then 方法处理响应。如果响应的状态码 不是200 时我们抛出一个错误。否则，我们将响应数据解析为 JSON 格式并输出到控制台。

5.2.2 Fetch的请求选项

Fetch API提供了一些可选的请求选项，用于自定义请求的行为。以下是一些常用的选项：

例如：

const options: RequestInit = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
  },
  body: JSON.stringify({ username: 'john', password: 'secret' })
};

fetch('https://api.example.com/login', options)
  .then((response: Response) => {
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    return response.json();
  })
  .then((data: any) => {
    console.log(data);
  })
  .catch((error: Error) => {
    console.error('Error:', error);
  });

【注】

• 关于权限认证与网络请求安全等相关话题，可以参考博客
  《用户认证、权限、安全原理详解（认证、权限、JWT、RFC 7235、HTTPS、HSTS、PC端、服务端、移动端、第三方认证等等）》，地址：https://blog.csdn.net/qq_28550263/article/details/122138769

5.2.3 Fetch 的响应处理

Fetch API提供了多种处理响应的方法，您可以根据需要选择适合的方法。以下是一些常用的处理方法：

例如：

fetch('https://api.example.com/image')
  .then((response: Response) => {
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    return response.blob();
  })
  .then((blob: Blob) => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  })
  .catch((error: Error) => {
    console.error('Error:', error);
  });

本例我们使用 response.blob() 方法将响应数据解析为 Blob对象。然后，我们创建一个img 元素，并将 Blob 对象的 URL 赋值给 img 的 src 属性，以显示图像。