Axios核心原理

Axios 是一个基于 Promise 的 HTTP 客户端，它可以用于浏览器和 Node.js。其核心原理主要包括以下几个部分：

请求流程

Axios 的请求流程主要包括以下步骤：

创建实例：axios.create() 方法可以创建一个具有默认配置的 Axios 实例。

请求拦截器：在请求发送前，可以使用 axios.interceptors.request.use() 进行修改，如添加 token、修改 headers。

请求适配器：在浏览器环境中，Axios 通过 XMLHttpRequest（XHR）发送请求，在 Node.js 环境中使用 http 模块。

响应拦截器：在请求返回后，axios.interceptors.response.use() 允许对响应数据进行处理，比如格式化数据或错误处理。

核心模块

Axios 主要由以下几个核心模块组成：

(1) Axios 类

Axios 是核心类，所有的请求都通过 Axios.prototype.request(config) 进行处理：

class Axios {
constructor(defaultConfig) {
this.defaults = defaultConfig;
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager(),
};
}

request(config) {
// 处理请求配置
config = mergeConfig(this.defaults, config);

// 构造拦截器链
let chain = [{ fulfilled: dispatchRequest, rejected: undefined }
];// 先添加请求拦截器
this.interceptors.request.forEach(interceptor => {chain.unshift(interceptor);
});// 再添加响应拦截器
this.interceptors.response.forEach(interceptor => {chain.push(interceptor);
});// 执行拦截器链
let promise = Promise.resolve(config);
while (chain.length) {const { fulfilled, rejected } = chain.shift();promise = promise.then(fulfilled, rejected);
}return promise;

}
}

(2) 拦截器 (InterceptorManager)

Axios 内部使用 InterceptorManager 管理拦截器，它的结构如下：

class InterceptorManager {
constructor() {
this.handlers = [];
}

use(fulfilled, rejected) {
this.handlers.push({ fulfilled, rejected });
}

forEach(fn) {
this.handlers.forEach(fn);
}
}

拦截器的执行顺序：

请求拦截器：先进后出（后添加的先执行）

响应拦截器：先进先出（先添加的先执行）

(3) 适配器 (adapters)

Axios 需要兼容不同的运行环境，因此通过适配器模式进行封装：

在浏览器环境下，使用 XMLHttpRequest 发送请求：

function xhrAdapter(config) {
return new Promise((resolve, reject) => {
const request = new XMLHttpRequest();
request.open(config.method.toUpperCase(), config.url, true);

request.onload = function () {resolve({data: request.responseText,status: request.status,headers: parseHeaders(request.getAllResponseHeaders()),config,});
};request.onerror = function () {reject(new Error("Network Error"));
};request.send(config.data);

});
}

在 Node.js 环境下，使用 http 模块：

function httpAdapter(config) {
return new Promise((resolve, reject) => {
const http = require(‘http’);
const req = http.request(config.url, (res) => {
let data = ‘’;
res.on(‘data’, chunk => data += chunk);
res.on(‘end’, () => resolve({ data, status: res.statusCode }));
});

req.on('error', reject);
req.write(config.data || '');
req.end();

});
}

(4) dispatchRequest 发送请求

dispatchRequest 负责选择适配器并发送请求：

function dispatchRequest(config) {
const adapter = config.adapter || (typeof XMLHttpRequest !== ‘undefined’ ? xhrAdapter : httpAdapter);
return adapter(config).then(response => {
return response;
});
}

Axios 其他功能

(1) axios.create()

可以创建一个自定义实例，带有默认 config：

const instance = axios.create({
baseURL: ‘https://api.example.com’,
timeout: 1000,
});
instance.get(’/user’);

(2) 取消请求 (CancelToken)

Axios 允许取消请求，核心原理是 AbortController：

const controller = new AbortController();
axios.get(’/user’, { signal: controller.signal }).catch(err => console.log(err));

// 取消请求
controller.abort();

(3) 并发请求 (axios.all())

可以使用 Promise.all 进行并发请求：

axios.all([axios.get(’/user’), axios.get(’/posts’)])
.then(axios.spread((user, posts) => {
console.log(user.data, posts.data);
}));

总结

核心架构

Axios 类：处理请求逻辑
InterceptorManager：管理请求/响应拦截器
dispatchRequest：调用适配器发送请求
xhrAdapter & httpAdapter：兼容不同环境

拦截器机制

先进后出执行请求拦截器

先进先出执行响应拦截器

功能

axios.create()：创建实例

axios.CancelToken：取消请求

axios.all()：并发请求

这样，Axios 通过模块化设计，提供了一种可扩展、兼容性强的 HTTP 请求解决方案。

Axios 之所以被称为“基于 Promise 的 HTTP 客户端”，是因为它的内部实现依赖于 Promise 机制来处理异步请求，并提供了链式调用的能力。

传统回调与 Promise 的区别

在使用 XMLHttpRequest 进行网络请求时，通常需要通过回调函数处理异步请求：

const xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘https://api.example.com/data’, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();

这种写法可读性较差，且多个异步操作嵌套时会形成回调地狱。

而 Promise 允许我们以更清晰的方式处理异步操作：

fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Axios 也是采用 Promise 方式来封装 XMLHttpRequest，避免了回调地狱，并提供更强的扩展性。

Axios 如何使用 Promise

Axios 的核心方法 axios(config) 或 axios.get(url) 返回的其实是一个 Promise：

axios.get(‘https://api.example.com/data’)
.then(response => {
console.log(response.data); // 请求成功时处理数据
})
.catch(error => {
console.error(error); // 请求失败时捕获错误
});

从外部使用上，Axios 提供了标准的 Promise 语法，可以使用 .then() 处理成功结果，使用 .catch() 处理错误，还可以使用 .finally() 进行清理工作。

Axios 内部基于 Promise 处理请求

Axios 在内部通过 Promise.resolve(config) 让请求流程变成一个 Promise 链：

Axios.prototype.request = function (config) {
let promise = Promise.resolve(config);

// 处理拦截器
const chain = [dispatchRequest, undefined]; // 发送请求的函数

this.interceptors.request.forEach(interceptor => {
chain.unshift(interceptor.fulfilled, interceptor.rejected);
});

this.interceptors.response.forEach(interceptor => {
chain.push(interceptor.fulfilled, interceptor.rejected);
});

while (chain.length) {
promise = promise.then(chain.shift(), chain.shift());
}

return promise;
};

Promise.resolve(config) 确保整个流程是异步执行的。

chain 维护一个拦截器队列，使得请求拦截器 -> 发送请求 -> 响应拦截器形成一个 Promise 链。

最终，返回的 Promise 允许调用 .then()、.catch() 处理异步逻辑。

支持 Promise 并发操作

Axios 还支持 axios.all() 进行多个异步请求的并发处理：

axios.all([
axios.get(’/user’),
axios.get(’/orders’)
])
.then(axios.spread((user, orders) => {
console.log(user.data, orders.data);
}))
.catch(error => console.error(error));

axios.all() 的本质是基于 Promise.all()，它会并行执行多个请求，并在所有请求完成后返回结果。