- 当前位置：首页 >人工智能 >手写Axios核心原理，再也不怕面试官问我Axios原理
手写Axios核心原理，再也不怕面试官问我Axios原理
发布时间：2025-11-05 15:30:20 来源：创站工坊 作者：域名
手写axios核心原理
手写axios核心原理，手写试官再也不怕面试官问我axios原理 手写axios核心原理一、心原axios简介
axios是理再什么？ axios有什么特性？（不得不说面试被问到几次）二、基本使用方式
三、也不原理实现axios和axios.method
四、怕面请求和响应拦截器
首先 接下来，手写试官再执行 接下来，心原再执行一、理再axios简介axios是也不原理什么？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。怕面
axios有什么特性？手写试官（不得不说面试被问到几次）
从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应转换请求数据和响应数据 取消请求 自动转换JSON 数据 客户端支持防御 XSRF实际上，axios可以用在浏览器和 node.js 中是心原因为，它会自动判断当前环境是理再什么，如果是也不原理浏览器，就会基于XMLHttpRequests实现axios。怕面如果是node.js环境，就会基于node内置核心模块http实现axios简单来说，axios的基本原理就是
axios还是属于 XMLHttpRequest， 因此需要实现一个ajax。或者基于http 。 还需要一个promise对象来对结果进行处理。有什么不理解的或者是IT技术网建议欢迎评论提出.项目已经放到github.可以的话给个star吧！谢谢 github：https://github.com/Sunny-lucking/howToBuildMyAxios
二、基本使用方式axios基本使用方式主要有
axios(config) axios.method(url, data , config) // index.html文件 <html> <script type="text/javascript" src="./myaxios.js"></script> <body> <button class="btn">点我发送请求</button> <script> document.querySelector(.btn).onclick = function() { // 分别使用以下方法调用，查看myaxios的效果 axios.post(/postAxios, { name: 小美post }).then(res => { console.log(postAxios 成功响应, res); }) axios({ method: post, url: /getAxios }).then(res => { console.log(getAxios 成功响应, res); }) } </script> </body> </html> </html>三、实现axios和axios.method从axios(config)的使用上可以看出导出的axios是一个方法。从axios.method(url, data , config)的使用可以看出导出的axios上或者原型上挂有get，post等方法。
实际上导出的axios就是一个Axios类中的一个方法。
如代码所以，核心代码是request。我们把request导出，就可以使用axios(config)这种形式来调用axios了。
class Axios { constructor() { } request(config) { return new Promise(resolve => { const {url = , method = get, data = {}} = config; // 发送ajax请求 const xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.onload = function() { console.log(xhr.responseText) resolve(xhr.responseText); } xhr.send(data); }) } }怎么导出呢？十分简单，new Axios，获得axios实例，再获得实例上的request方法就好了。
// 最终导出axios的方法，即实例的request方法 function CreateAxiosFn() { let axios = new Axios(); let req = axios.request.bind(axios); return req; } // 得到最后的全局变量axios let axios = CreateAxiosFn();点击查看此时的高防服务器myAxios.js
现在axios实际上就是request方法。
你可能会很疑惑，因为我当初看源码的时候也很疑惑：干嘛不直接写个request方法，然后导出呢？非得这样绕这么大的弯子。别急。后面慢慢就会讲到。
现在一个简单的axios就完成了，我们来引入myAxios.js文件并测试一下可以使用不？
简单的搭建服务器：
//server.js var express = require(express); var app = express(); //设置允许跨域访问该服务. app.all(*, function (req, res, next) { res.header(Access-Control-Allow-Origin, *); res.header(Access-Control-Allow-Headers, Content-Type); res.header(Access-Control-Allow-Methods, *); res.header(Content-Type, application/json;charset=utf-8); next(); }); app.get(/getTest, function(request, response){ data = { FrontEnd:前端, Sunny:阳光 }; response.json(data); }); var server = app.listen(5000, function(){ console.log("服务器启动"); }); //index.html <script type="text/javascript" src="./myAxios.js"></script> <body> <button class="btn">点我发送请求</button> <script> document.querySelector(.btn).onclick = function() { // 分别使用以下方法调用，查看myaxios的效果 axios({ method: get, url: http://localhost:5000/getTest }).then(res => { console.log(getAxios 成功响应, res); }) } </script> </body>点击按钮，看看是否能成功获得数据。
发现确实成功。
可喜可贺
现在我们来实现下axios.method()的形式。
思路：我们可以再Axios.prototype添加这些方法。而这些方法内部调用request方法即可，如代码所示：
// 定义get,post...方法，挂在到Axios原型上 const methodsArr = [get, delete, head, options, put, patch, post]; methodsArr.forEach(met => { Axios.prototype[met] = function() { console.log(执行+met+方法); // 处理单个方法 if ([get, delete, head, options].includes(met)) { // 2个参数(url[, config]) return this.request({ method: met, url: arguments[0], ...arguments[1] || {} }) } else { // 3个参数(url[,data[,config]]) return this.request({ method: met, url: arguments[0], data: arguments[1] || {}, ...arguments[2] || {} }) } } })我们通过遍历methodsArr数组，依次在Axios.prototype添加对应的方法，注意的是get, delete, head, options这些方法只接受两个参数。而其他的可接受三个参数，想一下也知道，get不把参数放body的源码库。
但是，你有没有发现，我们只是在Axios的prototype上添加对应的方法，我们导出去的可是request方法啊，那怎么办？简单，把Axios.prototype上的方法搬运到request上即可。
我们先来实现一个工具方法，实现将b的方法混入a;
const utils = { extend(a,b, context) { for(let key in b) { if (b.hasOwnProperty(key)) { if (typeof b[key] === function) { a[key] = b[key].bind(context); } else { a[key] = b[key] } } } } }然后我们就可以利用这个方法将Axios.prototype上的方法搬运到request上啦。
我们修改一下之前的CreateAxiosFn方法即可
function CreateAxiosFn() { let axios = new Axios(); let req = axios.request.bind(axios); 增加代码 utils.extend(req, Axios.prototype, axios) return req; }点击查看此时的myAxios.js
现在来测试一下能不能使用axios.get()这种形式调用axios。
<body> <button class="btn">点我发送请求</button> <script> document.querySelector(.btn).onclick = function() { axios.get(http://localhost:5000/getTest) .then(res => { console.log(getAxios 成功响应, res); }) } </script> </body>又是意料之中成功。再完成下一个功能之前，先给上目前myAxios.js的完整代码
class Axios { constructor() { } request(config) { return new Promise(resolve => { const {url = , method = get, data = {}} = config; // 发送ajax请求 console.log(config); const xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.onload = function() { console.log(xhr.responseText) resolve(xhr.responseText); } xhr.send(data); }) } } // 定义get,post...方法，挂在到Axios原型上 const methodsArr = [get, delete, head, options, put, patch, post]; methodsArr.forEach(met => { Axios.prototype[met] = function() { console.log(执行+met+方法); // 处理单个方法 if ([get, delete, head, options].includes(met)) { // 2个参数(url[, config]) return this.request({ method: met, url: arguments[0], ...arguments[1] || {} }) } else { // 3个参数(url[,data[,config]]) return this.request({ method: met, url: arguments[0], data: arguments[1] || {}, ...arguments[2] || {} }) } } }) // 工具方法，实现b的方法或属性混入a; // 方法也要混入进去 const utils = { extend(a,b, context) { for(let key in b) { if (b.hasOwnProperty(key)) { if (typeof b[key] === function) { a[key] = b[key].bind(context); } else { a[key] = b[key] } } } } } // 最终导出axios的方法-》即实例的request方法 function CreateAxiosFn() { let axios = new Axios(); let req = axios.request.bind(axios); // 混入方法， 处理axios的request方法，使之拥有get,post...方法 utils.extend(req, Axios.prototype, axios) return req; } // 得到最后的全局变量axios let axios = CreateAxiosFn();四、请求和响应拦截器我们先看下拦截器的使用
// 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });拦截器是什么意思呢？其实就是在我们发送一个请求的时候会先执行请求拦截器的代码，然后再真正地执行我们发送的请求，这个过程会对config，也就是我们发送请求时传送的参数进行一些操作。
而当接收响应的时候，会先执行响应拦截器的代码，然后再把响应的数据返回来，这个过程会对response，也就是响应的数据进行一系列操作。
怎么实现呢？需要明确的是拦截器也是一个类，管理响应和请求。因此我们先实现拦截器
class InterceptorsManage { constructor() { this.handlers = []; } use(fullfield, rejected) { this.handlers.push({ fullfield, rejected }) } }我们是用这个语句axios.interceptors.response.use和axios.interceptors.request.use，来触发拦截器执行use方法的。
说明axios上有一个响应拦截器和一个请求拦截器。那怎么实现Axios呢？看代码
class Axios { constructor() { 新增代码 this.interceptors = { request: new InterceptorsManage, response: new InterceptorsManage } } request(config) { return new Promise(resolve => { const {url = , method = get, data = {}} = config; // 发送ajax请求 console.log(config); const xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.onload = function() { console.log(xhr.responseText) resolve(xhr.responseText); }; xhr.send(data); }) } }可见，axios实例上有一个对象interceptors。这个对象有两个拦截器，一个用来处理请求，一个用来处理响应。
所以，我们执行语句axios.interceptors.response.use和axios.interceptors.request.use的时候，实现获取axios实例上的interceptors对象，然后再获取response或request拦截器，再执行对应的拦截器的use方法。
而执行use方法，会把我们传入的回调函数push到拦截器的handlers数组里。
到这里你有没有发现一个问题。这个interceptors对象是Axios上的啊，我们导出的是request方法啊（欸？好熟悉的问题，上面提到过哈哈哈~~~额）。处理方法跟上面处理的方式一样，都是把Axios上的方法和属性搬到request过去，也就是遍历Axios实例上的方法，得以将interceptors对象挂载到request上。
所以只要更改下CreateAxiosFn方法即可。
function CreateAxiosFn() { let axios = new Axios(); let req = axios.request.bind(axios); // 混入方法， 处理axios的request方法，使之拥有get,post...方法 utils.extend(req, Axios.prototype, axios) 新增代码 utils.extend(req, axios) return req; }好了，现在request也有了interceptors对象，那么什么时候拿interceptors对象中的handler之前保存的回调函数出来执行。
没错，就是我们发送请求的时候，会先获取request拦截器的handlers的方法来执行。再执行我们发送的请求，然后获取response拦截器的handlers的方法来执行。
因此，我们要修改之前所写的request方法 之前是这样的。
request(config) { return new Promise(resolve => { const {url = , method = get, data = {}} = config; // 发送ajax请求 console.log(config); const xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.onload = function() { console.log(xhr.responseText) resolve(xhr.responseText); }; xhr.send(data); }) }但是现在request里不仅要执行发送ajax请求，还要执行拦截器handlers中的回调函数。所以，最好下就是将执行ajax的请求封装成一个方法
request(config) { this.sendAjax(config) } sendAjax(config){ return new Promise(resolve => { const {url = , method = get, data = {}} = config; // 发送ajax请求 console.log(config); const xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.onload = function() { console.log(xhr.responseText) resolve(xhr.responseText); }; xhr.send(data); }) }好了，现在我们要获得handlers中的回调
request(config) { // 拦截器和请求组装队列 let chain = [this.sendAjax.bind(this), undefined] // 成对出现的，失败回调暂时不处理 // 请求拦截 this.interceptors.request.handlers.forEach(interceptor => { chain.unshift(interceptor.fullfield, interceptor.rejected) }) // 响应拦截 this.interceptors.response.handlers.forEach(interceptor => { chain.push(interceptor.fullfield, interceptor.rejected) }) // 执行队列，每次执行一对，并给promise赋最新的值 let promise = Promise.resolve(config); while(chain.length > 0) { promise = promise.then(chain.shift(), chain.shift()) } return promise; }我们先把sendAjax请求和undefined放进了chain数组里，再把请求拦截器的handlers的成对回调放到chain数组头部。再把响应拦截器的handlers的承兑回调反倒chain数组的尾部。
然后再 逐渐取数 chain数组的成对回调执行。
promise = promise.then(chain.shift(), chain.shift())这一句，实际上就是不断将config从上一个promise传递到下一个promise，期间可能回调config做出一些修改。什么意思？我们结合一个例子来讲解一下
首先拦截器是这样使用的
// 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });然后执行request的时候。chain数组的数据是这样的
chain = [ function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } this.sendAjax.bind(this), undefined, function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); } ]首先执行第一次promise.then(chain.shift(), chain.shift())，即
promise.then( function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } )一般情况，promise是resolved状态，是执行成功回调的，也就是执行
function (config) { // 在发送请求之前做些什么 return config; },promise.then是要返回一个新的promise对象的。为了区分，在这里，我会把这个新的promise对象叫做第一个新的promise对象 这个第一个新的promise对象会把
function (config) { // 在发送请求之前做些什么 return config; },的执行结果传入resolve函数中
resolve(config)使得这个返回的第一个新的promise对象的状态为resovled，而且第一个新的promise对象的data为config。
这里需要对Promise的原理足够理解。所以我前一篇文章写的是手写Promise核心原理，再也不怕面试官问我Promise原理，你可以去看看
接下来，再执行
promise.then( sendAjax(config) , undefined )注意：这里的promise是 上面提到的第一个新的promise对象。
而promise.then这个的执行又会返回第二个新的promise对象。
因为这里promise.then中的promise也就是第一个新的promise对象的状态是resolved的，所以会执行sendAjax()。而且会取出第一个新的promise对象的data 作为config转入sendAjax()。
当sendAjax执行完，就会返回一个response。这个response就会保存在第二个新的promise对象的data中。
接下来，再执行
promise.then( function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); } )同样，会把第二个新的promise对象的data取出来作为response参数传入
function (response) { // 对响应数据做点什么 return response; },饭后返回一个promise对象，这个promise对象的data保存了这个函数的执行结果，也就是返回值response。
然后通过return promise;
把这个promise返回了。咦？是怎么取出promise的data的。我们看看我们平常事怎么获得响应数据的
axios.get(http://localhost:5000/getTest) .then(res => { console.log(getAxios 成功响应, res); })在then里接收响应数据。所以原理跟上面一样，将返回的promise的data作为res参数了。
现在看看我们的myAxios完整代码吧，好有个全面的了解
class InterceptorsManage { constructor() { this.handlers = []; } use(fullfield, rejected) { this.handlers.push({ fullfield, rejected }) } } class Axios { constructor() { this.interceptors = { request: new InterceptorsManage, response: new InterceptorsManage } } request(config) { // 拦截器和请求组装队列 let chain = [this.sendAjax.bind(this), undefined] // 成对出现的，失败回调暂时不处理 // 请求拦截 this.interceptors.request.handlers.forEach(interceptor => { chain.unshift(interceptor.fullfield, interceptor.rejected) }) // 响应拦截 this.interceptors.response.handlers.forEach(interceptor => { chain.push(interceptor.fullfield, interceptor.rejected) }) // 执行队列，每次执行一对，并给promise赋最新的值 let promise = Promise.resolve(config); while(chain.length > 0) { promise = promise.then(chain.shift(), chain.shift()) } return promise; } sendAjax(){ return new Promise(resolve => { const {url = , method = get, data = {}} = config; // 发送ajax请求 console.log(config); const xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.onload = function() { console.log(xhr.responseText) resolve(xhr.responseText); }; xhr.send(data); }) } } // 定义get,post...方法，挂在到Axios原型上 const methodsArr = [get, delete, head, options, put, patch, post]; methodsArr.forEach(met => { Axios.prototype[met] = function() { console.log(执行+met+方法); // 处理单个方法 if ([get, delete, head, options].includes(met)) { // 2个参数(url[, config]) return this.request({ method: met, url: arguments[0], ...arguments[1] || {} }) } else { // 3个参数(url[,data[,config]]) return this.request({ method: met, url: arguments[0], data: arguments[1] || {}, ...arguments[2] || {} }) } } }) // 工具方法，实现b的方法混入a; // 方法也要混入进去 const utils = { extend(a,b, context) { for(let key in b) { if (b.hasOwnProperty(key)) { if (typeof b[key] === function) { a[key] = b[key].bind(context); } else { a[key] = b[key] } } } } } // 最终导出axios的方法-》即实例的request方法 function CreateAxiosFn() { let axios = new Axios(); let req = axios.request.bind(axios); // 混入方法， 处理axios的request方法，使之拥有get,post...方法 utils.extend(req, Axios.prototype, axios) return req; } // 得到最后的全局变量axios let axios = CreateAxiosFn();来测试下拦截器功能是否正常
<script type="text/javascript" src="./myAxios.js"></script> <body> <button class="btn">点我发送请求</button> <script> // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 config.method = "get"; console.log("被我请求拦截器拦截了，哈哈:",config); return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 console.log("被我响应拦截拦截了，哈哈 "); response = {message:"响应数据被我替换了，啊哈哈哈"} return response; }, function (error) { // 对响应错误做点什么 console.log("错了吗"); return Promise.reject(error); }); document.querySelector(.btn).onclick = function() { // 分别使用以下方法调用，查看myaxios的效果 axios({ url: http://localhost:5000/getTest }).then(res => { console.log(response, res); }) } </script> </body>拦截成功！！！！！
- 还是老规矩，由图来说话（见图1），图片有点大，打开稍慢（点击下图看大图）图1：Ubuntu 9.04 3D桌面特效那就来吧，打开终端，输入如下命令（见图2），简单吧，然后输入密码，稍后就会安装好了。图2在外观首选项的视觉效果里选择 扩展（X）提供更多美仑美奂的效果设置。需要更快的显卡（见图3）图3 见上图打开CompizConfig设置管理器（见图4）。进行相关设置，具体可以参考Linuxidc以前的相关文章。
- 小白可以选择one域名吗？one域名怎么样？
- 一步即可！MySQL遇到数据分析场景就“怂”？解决方案已经帮你找好了
- 我必须得告诉大家的MySQL优化原理
- 作为一个经常喜欢敲命令的人,可能要同时做很多操作,Linux各个桌面的窗口切换有多那啥,这里就不吐槽了, 我总是在想要做另外一个操作,但又不想结束当前的工作,之前我习惯于再打开一个终端,但是后来终端越来越多导致我想找回原来的工作的时候就变的很费力,而且对桌面有洁癖的人不允许任务栏太杂 后来发现了一款终端软件terminator,它支持分割终端,并可以在终端中快速切换.还有一款下拉式的终端软件Guake可以随意呼出隐藏.下面就一一介绍一下.1 安装Terminator复制代码代码如下:2 使用复制代码代码如下:复制代码代码如下:3 Guake复制代码代码如下:在文本模式的环境中使用一个窗口管理器 – 这听起来有点不可思议， 是吧？ 然而，你应该记得当 Web 浏览器第一次实现分页浏览的时候吧？ 在当时， 这是在可用性上的一个重大进步，它减少了桌面任务栏的杂乱无章和繁多的窗口列表。 对于你的浏览器来说，你只需要一个按钮便可以在浏览器中切换到你打开的每个单独网站， 而不是针对每个网站都有一个任务栏或导航图标。 这个功能非常有意义。若有时你同时运行着几个虚拟终端，你便会遇到相似的情况； 在这些终端之间跳转，或每次在任务栏或窗口列表中找到你所需要的那一个终端，都可能会让你觉得麻烦。 拥有一个文本模式的窗口管理器不仅可以让你像在同一个终端窗口中运行多个 shell 会话，而且你甚至还可以将这些窗口排列在一起。另外，这样还有另一个好处：可以将这些窗口进行分离和重新连接。想要看看这是如何运行的最好方式是自己尝试一下。在一个终端窗口中，输入 screen （在大多数发行版本中，它已经默认安装了或者可以在软件包仓库中找到）。 某些欢迎的文字将会出现 – 只需敲击 Enter 键这些文字就会消失。 现在运行一个交互式的文本模式的程序，例如 nano， 并关闭这个终端窗口。在一个正常的 shell 对话中， 关闭窗口将会终止所有在该终端中运行的进程 – 所以刚才的 Nano 编辑对话也就被终止了， 但对于 screen 来说，并不是这样的。打开一个新的终端并输入如下命令：复制代码代码如下:复制代码代码如下:复制代码代码如下:上图中， tmux 开启了两个窗格： 左边是 Vim 正在编辑一个配置文件，而右边则展示着指导手册页。
- 用 TypeScript 实现斐波那契数列
- Simula 诞生之前的面向对象程序设计
- 神奇的SQL → 为什么GROUP BY之后不能直接引用原表中的列？
- 荣耀6Plus手机全方位评测（出色的摄影体验与卓越的性能）
- 硬核干货！7600字带你学会 Redis 性能优化点
随便看看
- Copyright © 2025 Powered by 手写Axios核心原理，再也不怕面试官问我Axios原理,创站工坊 滇ICP备2023006006号-44sitemap