Axios：什么是它，HTTP请求及API基础操作

什么是Axios？

Axios是一个用于从浏览器和Node.js环境执行HTTP请求的JavaScript库。它基于浏览器中的XMLHttpRequest和Node.js中的http模块构建，为两个平台提供统一的API。

Axios相对于原生fetch的主要优势是自动JSON处理、拦截器支持和更方便的错误处理。与fetch不同，Axios不需要两次.then调用就能获得响应的JSON体，并且在HTTP错误（4xx、5xx）时自动抛出异常。

该库支持所有主要的HTTP方法：GET、POST、PUT、DELETE、PATCH和HEAD。既可以在简单项目中使用，也可以在每天处理数十万请求的大型企业应用中使用。

Axios的主要特点

• Promise API——所有操作都返回Promise，简化异步代码
• TypeScript支持——所有方法和配置的完整类型定义
• 拦截器——用于处理请求和响应的中间件
• 转换——输入和输出数据的自动转换

Axios的架构和工作原理

Axios的架构基于适配器（adapters）的概念。该库抽象了传输层：在浏览器中使用XMLHttpRequest，在Node.js中使用http或https模块。这使得无论执行环境如何，都能提供统一的接口。

每个请求都经过拦截器链，这些拦截器可以修改请求或响应的配置。经过拦截器后，请求被传递给执行实际HTTP调用的适配器。然后响应在到达应用程序代码之前经过响应拦截器。

Axios请求生命周期

1. 创建配置——方法、URL、标头、请求体
2. 请求拦截器——修改配置，添加令牌
3. HTTP调用——通过浏览器或Node.js适配器执行
4. 响应拦截器——转换响应，处理错误
5. 返回结果——Promise被解决（带有数据）或拒绝

Axios的主要功能

Axios包含许多内置功能，使其成为在移动和Web应用程序中使用HTTP的便捷选择。让我们来看一下最重要的功能。

自动数据转换

发送请求时，Axios使用JSON.stringify自动将JavaScript对象转换为JSON字符串。接收响应时，该库将JSON解析回对象。这使开发人员免于手动序列化和反序列化数据。

CSRF保护

在浏览器环境中，Axios自动从cookie中添加XSRF-TOKEN标头，保护应用程序免受跨站请求伪造的攻击。为此，只需将服务器配置为在名为XSRF-TOKEN的cookie中发送令牌即可。

超时和请求取消

该库支持通过timeout参数设置超时，并通过AbortController取消请求。这对于连接不稳定的移动应用程序尤其重要，因为挂起的请求会消耗电池和数据流量。

Axios的安装和配置

安装Axios通过任何包管理器进行。该库在npm注册表中可用，可以在Node.js和浏览器项目中连接。对于TypeScript，类型包含在主包中，不需要额外的依赖。

安装后，可以使用基本配置创建实例：基本URL、默认超时、通用标头。这样可以避免在每个请求中重复相同的参数，并集中管理HTTP客户端的设置。

# 通过npm安装
npm install axios

# 通过yarn安装
yarn add axios

# 通过pnpm安装
pnpm add axios

创建带配置的实例

建议为每个API服务创建单独的Axios实例。这允许设置基本URL、标准标头和超时，这些将应用于该实例的所有请求，而无需在每个调用中重复。

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

Axios代码示例

请求示例展示了Axios的主要使用模式。所有示例都使用async/await语法，与.then()链相比，使异步代码更易读。

带参数的GET请求

从服务器获取数据使用axios.get方法。请求参数通过params对象传递，该对象会自动转换为查询字符串。响应包含data字段中的数据、status中的状态和headers中的标头。

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUsers() {
  try {
    const response = await api.get<User[]>('/users', {
      params: { page: 1, limit: 10 }
    });
    return response.data;
  } catch (error) {
    console.error('加载用户错误', error);
    throw error;
  }
}

带体的POST请求

向服务器发送数据使用axios.post。第二个参数是一个包含数据的对象，Axios会自动将其序列化为JSON。Content-Type类型默认为application/json。

interface CreateUserDto {
  name: string;
  email: string;
  role: string;
}

async function createUser(data: CreateUserDto) {
  const response = await api.post<User>('/users', data);
  return response.data;
}

拦截器

拦截器是为每个请求或响应执行的中间件函数。它们允许添加授权令牌、记录请求、集中处理错误。请求拦截器添加Authorization标头，其中包含从存储中获取的令牌。

// 请求拦截器——添加授权令牌
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 响应拦截器——处理401错误
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Axios中的错误处理

Axios中的错误处理基于异常机制。与fetch不同，Axios会自动捕获HTTP错误（4xx、5xx）并将其传递给catch块。错误对象包含有关服务器响应、请求和执行上下文的信息。

区分三种类型的错误很重要：服务器响应错误（response）、请求错误（request）和配置错误（config）。第一种发生在HTTP调用成功但返回错误代码时，第二种——当服务器没有响应时，第三种——请求配置不正确时。

import axios, { AxiosError } from 'axios';

async function safeRequest() {
  try {
    return await api.get('/data');
  } catch (error) {
    if (error instanceof AxiosError) {
      if (error.response) {
        console.warn('响应错误', error.response.status);
      } else if (error.request) {
        console.warn('服务器无响应');
      } else {
        console.warn('配置错误');
      }
    }
  }
}

Axios与Fetch API的比较

Axios与原生Fetch API的比较有助于理解每种技术的适用场景。Fetch是浏览器内置的API，不需要安装。Axios是具有额外功能的第三方库。对于简单的请求，fetch就足够了，对于需要拦截器和集中式错误处理的复杂应用，Axios更便捷。

Fetch不将HTTP错误（4xx、5xx）视为异常——需要检查response.ok。Fetch需要两次.then()调用来获取JSON：response.json()然后返回带有数据的Promise。Axios自动完成这些操作。Fetch在没有额外polyfill的情况下不支持文件上传进度。Axios有内置的onUploadProgress和onDownloadProgress。

在Node.js中，Fetch从18版本开始作为实验性功能可用，而Axios从Node.js 10开始稳定运行。对于支持较旧Node.js版本的项目，选择明显倾向于Axios。对于没有复杂请求处理的现代浏览器项目，fetch可能就足够了。