一览 axios：剖析其处理流程

前端

2023-10-13 03:01:20

深入剖析 Axios：处理流程与核心功能

Axios 概述

Axios 是一个基于 Promise 的 HTTP 库，用于轻松发送异步 HTTP 请求。其易用性和强大的功能使其成为众多开发者的热门选择。

Axios 处理流程

Axios 的处理流程主要包含以下步骤：

创建 Axios 实例
配置 Axios 实例
发送请求
处理响应
处理错误

创建 Axios 实例

首先，创建 Axios 实例：

const axios = require('axios');
const instance = axios.create();

配置 Axios 实例

创建实例后，对其进行配置，以满足特定需求：

baseURL： 请求的基础 URL
timeout： 请求超时时间
headers： 请求头
data： 请求体
method： 请求方法

发送请求

instance.get('/users').then((response) => {
  console.log(response.data);
});

处理响应

成功请求后，Axios 将响应数据返回给 then() 方法：

response.data.forEach((user) => {
  console.log(user.name);
});

处理错误

失败请求时，Axios 将错误信息返回给 catch() 方法：

instance.get('/users').catch((error) => {
  console.log(error.message);
});

拦截器

Axios 提供了拦截器功能，允许我们在请求发送前或响应返回后处理请求和响应：

axios.interceptors.request.use((config) => {
  // 请求发送前处理
  return config;
}, (error) => {
  // 请求发送前处理错误
  return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
  // 响应返回后处理
  return response;
}, (error) => {
  // 响应返回后处理错误
  return Promise.reject(error);
});

实例与配置

Axios 支持创建多个实例，每个实例具有独立的配置。这允许在不同场景下使用不同配置，无需重复配置。

案例：获取用户列表

代码：

// 创建 Axios 实例
const instance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' },
});

// 发送请求
instance.get('/users').then((response) => {
  // 处理响应
  const users = response.data;
  console.log(users);
}).catch((error) => {
  // 处理错误
  console.log(error.message);
});