9.axios底层原理,和promise的对比(2)

😺😺😺 和promise的对比

完全可以直接使用 Promise 来发 HTTP 请求,比如用原生 fetch + Promise 就可以实现网络请求功能👇

✅ 用 Promise + fetch 的写法(原生)

fetch('https://api.example.com/data')

.then(response => {

if (!response.ok) {

throw new Error('网络请求失败');

}

return response.json();

})

.then(data => {

console.log('获取到的数据:', data);

})

.catch(error => {

console.error('出错了:', error);

});

或者配合 async/await:

async function getData() {

try {

const res = await fetch('https://api.example.com/data');

const data = await res.json();

console.log(data);

} catch (err) {

console.error('请求失败:', err);

}

}

❓那为什么还要用 Axios?

你可以把 Axios 理解为在 Promise 的基础上,做了很多贴心的"增强封装",避免你自己重复造轮子,比如

✅ 小结一句话

完全可以用Promise 来发 HTTP 请求,比如用原生 fetch + Promise 就可以实现网络请求功能👇

✅ 用 Promise + fetch 的写法(原生)

fetch('https://api.example.com/data')

.then(response => {

if (!response.ok) {

throw new Error('网络请求失败');

}

return response.json();

})

.then(data => {

console.log('获取到的数据:', data);

})

.catch(error => {

console.error('出错了:', error);

});

或者配合 async/await:

async function getData() {

try {

const res = await fetch('https://api.example.com/data');

const data = await res.json();

console.log(data);

} catch (err) {

console.error('请求失败:', err);

}

}

❓那为什么还要用 Axios?

你可以把 Axios 理解为在 Promise 的基础上,做了很多贴心的"增强封装",避免你自己重复造轮子,比如

✅ 小结一句话

Promise 是底层机制;fetch 是浏览器原生 API;Axios 是基于 Promise 的高级封装,帮你做了更多重复性的工作。

所以结论是:

• ✅ 想极简 + 自己控制逻辑:可以直接用 fetch + Promise

• 🚀 想方便 + 拦截器 + 项目统一封装:推荐用 Axios

😺😺😺 aixos的底层原理

lAxios 的底层原理,可以把它理解为一层「统一的网络请求封装」,根据运行环境自动调用不同的底层实现。

✅ 一句话概括:

复制代码
Axios 是一个对浏览器的 XMLHttpRequest 和 Node.js 的 http 模块的封装,并结合了 Promise、拦截器、中间件机制等高级功能的请求库。

🧩 Axios 底层原理详解(按执行流程讲)

  1. 运行环境判断

Axios 的代码是通用的,在构建时自动根据环境(浏览器 vs Node)使用不同适配器:

// 源码片段

var getDefaultAdapter = function getDefaultAdapter() {

if (typeof XMLHttpRequest !== 'undefined') {

return require('./adapters/xhr'); // 浏览器环境

} else if (typeof process !== 'undefined') {

return require('./adapters/http'); // Node.js 环境

}

};

  1. 核心结构:axios 实例本质是一个函数 + 配置链式调用系统

Axios 是通过 axios.create() 创建一个带默认配置的实例,其实本质是一个函数对象,并带有拦截器、请求方法(get/post/put...)等属性。

const axios = Axios.create();

axios.get('/url') // 就是在调用实例对象的方法

  1. 请求发送:根据环境走不同适配器

👉 浏览器中

使用的是 XMLHttpRequest

const xhr = new XMLHttpRequest();

xhr.open(method, url);

xhr.send(data);

👉 Node.js 中

使用的是 http 或 https 模块

const http = require('http');

const req = http.request(options, res => {

// 处理响应

});

req.write(data);

req.end();

  1. 请求流程组成(重点)

用户调用 axios(config)

合并默认配置 + 用户配置

执行请求拦截器链(request interceptors)

调用适配器(xhr / http)发出请求

获取响应后执行响应拦截器链(response interceptors)

返回 Promise 给调用者

  1. 拦截器机制(interceptors)

Axios 内部实现了一个 链式中间件系统,用来处理拦截器。

你添加的拦截器会被加入到一条"任务链"中执行,先执行 request 拦截器,再发请求,之后执行 response 拦截器:

interceptors.request.use(fn1);

interceptors.request.use(fn2); // 执行顺序:fn1 → fn2

  1. Promise 化封装

Axios 所有操作都是 Promise 化的,便于使用 async/await,也方便链式 .then() 调用。

return new Promise((resolve, reject) => {

xhr.onload = () => resolve(response);

xhr.onerror = () => reject(error);

});

🧠 总结一句话:

复制代码
Axios 底层是通过环境适配调用 XHR 或 Node 的 HTTP 模块,外部暴露统一的 Promise 风格 API,并通过"拦截器链"实现请求和响应逻辑的可扩展性。
相关推荐
海天胜景14 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼15 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再19 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55523 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
木头没有瓜2 小时前
vscode离线安装插件
ide·vue.js·vscode
浪裡遊3 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
markyankee1014 小时前
使用 Vue 脚手架创建项目的完整指南
vue.js
青松学前端4 小时前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
流星稍逝4 小时前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js
eric*16885 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹