手写Axios核心原理

最新推荐文章于 2024-04-11 02:05:44 发布
最新推荐文章于 2024-04-11 02:05:44 发布
阅读量1.2k 收藏 4
点赞数 1
文章标签： ajax js http html restful
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webyouxuan/article/details/110607763
版权

戳蓝字"

Web前端严选

"

关注我们哦

！

Axios是一个基于promise的HTTP库，它能够自动判断当前环境，自由切换在浏览器和 node.js环境中。如果是浏览器，就会基于XMLHttpRequests实现；如果是node环境，就会基于node内置核心http模块实现。同时，它还用promise处理了响应结果，避免陷入回调地狱中去。

不仅如此，Axios还可以拦截请求和响应、转化请求数据和响应数据、中断请求、自动转换JSON数据、客户端支持防御XSRF等。如此众多好用的功能，快来一起看看它是如何实现的吧！

1.基本使用

axios基本使用方式主要有：

  • axios(config)

  • axios.method(url,data,config)

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    username: 'Web前端严选',
    age: 2
  }
});
// GET请求ID参数
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2.实现axios

从axios(config)的使用上可以看出导出的axios是一个方法，从axios.get()的使用上可以看出导出的axios原型上会有get,post,put,delete等方法。

由分析可知，axios实际上是Axios类中的一个方法。我们可以先写一个request方法来实现主要的请求功能，这样就能使用axios(config)形式来调用了。

class Axios{
    constructor(){

    }
    request(config){
        return new Promise((resolve) => {
            const {url='',data={},method='get'} = config; //解构传参
            const xhr = new XMLHttpRequest;     //创建请求对象
            xhr.open(method,url,true); 
            xhr.onreadystatechange = () => {
                if(xhr.readyState == 4 && xhr.status == 200){
                    resolve(xhr.responseText);
                    //异步请求返回后将Promise转为成功态并将结果导出
                }
            }
            xhr.send(JSON.stringfy(data));
        })
    }
}

function CreateAxiosFn(){
    let axios = new Axios;
    let req = axios.request.bind(axios);
    return req;
}

let axios = CreateAxiosFn();

然后搭建一个简易服务端代码，以测试请求的效果：

const express = require('express')

let 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('/getInfo', function(request, response){
    let data = {
        'username':'前端严选',
        'age':'2'
    };
    response.json(data);
});
app.listen(3000, function(){
    console.log("服务器启动");
});

启动服务后，在页面中测试请求是否成功：

<button onclick="getMsg()">点击</button>
<script src="./axios.js"></script>
<script>
    function getMsg(){
        axios({
            method: 'get',
            url: 'http://localhost:3000/getInfo'
        }).then(res => {
            console.log(res);
        })
    }
</script>

点击按钮后，可以看到请求成功并获取到数据。

3.原型上的方法

接下来实现以axios.method()形式的方法。

通过axios.get()，axios.post()，axios.put()等方法可以看出它们都是Axios.prototype上的方法，这些方法调用内部的request方法即可：

const methodsArr = ['get','post','put','delete','head','options','patch','head'];
methodsArr.forEach(method => {
    Axios.prototype[method] = function(){
        return this.request({
            method: method,
            ...arguments[0]
        })
    }
})
❝

arguments的第一个参数包含url,data等信息，直接解构它的第一个元素即可

❞

还需要实现一个工具方法，用来将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方法，使之拥有get,post等方法

function CreateAxiosFn(){
    let axios = new Axios;
    let req = axios.request.bind(axios);
    //新增如下代码
    utils.extend(req, Axios.prototype, axios)
    return req;
}

再来测试一下post的请求：

axios.post({
    url: 'http://localhost:3000/postTest',
    data: {
        a: 1,
        b: 2
    }
}).then(res => {
    console.log(res);
})

可以看到正确返回结果了。

4.拦截器

先来看看拦截器的使用：

// 请求拦截
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);
  });

拦截器，顾名思义就是在请求之前和响应之前，对真正要执行的操作数据拦截住进行一些处理。

那么如何实现呢，首先拦截器也是一个类，用于管理响应和请求。

class InterceptorsManage{
    constructor(){
        this.handlers = [];
    }
    use(onFulField,onRejected){
        //将成功的回调和失败的回调都存放到队列中
        this.handlers.push({
            onFulField,
            onRejected
        })
    }
}
❝

axios.interceptors.response.use和axios.interceptors.request.use来定义请求和响应的拦截方法。

❞

这说明axios上有响应拦截器和请求拦截器，那么如何在axios上实现呢：

class Axios{
    constructor(){
        this.interceptors = {
            request: new InterceptorsManage,
            response: new InterceptorsManage
        }
    }
    //....
}

在Axios的构造函数中新增interceptors属性，然后定义request和response属性用于处理请求和响应。

执行use方法时，会把传入的回调函数放到handlers数组中。

这时再回看使用方式，axios.interceptors.request.use方法是绑在axios实例上的，因此同样需要把Axios上的属性和方法转移到request上，将interceptors对象挂载到request方法上。

function CreateAxiosFn() {
  let axios = new Axios();
  let req = axios.request.bind(axios);
  utils.extend(req, Axios.prototype, axios)
  //新增如下代码
  utils.extend(req, axios)
  return req;
}

但是现在request不仅要执行请求的发送，还要执行拦截器中handler的回调函数，因此还需要把request方法进行一下改造：

request(config){
    //拦截器和请求的队列
    let chain = [this.sendAjax.bind(this),undefined];
 //请求的拦截
    this.interceptors.request.handlers.forEach(interceptor => {
        chain.unshift(interceptor.onFulField,interceptor.onRejected);
    })
 //响应的拦截
    this.interceptors.response.handlers.forEach(interceptor => {
        chain.push(interceptor.onFulField,interceptor.onRejected)
    })
    let promise = Promise.resolve(config);
    while(chain.length > 0){
        //从头部开始依次执行请求的拦截、真正的请求、响应的拦截
        promise = promise.then(chain.shift(),chain.shift());
    }
    return promise;
}
sendAjax(config){
    return new Promise((resolve) => {
        const {url='',method='get',data={}} = config;
        const xhr = new XMLHttpRequest();
        xhr.open(method,url,true);
        xhr.onreadystatechange = () => {
            if(xhr.readyState == 4 && xhr.status == 200){
                resolve(xhr.responseText)
            }
        }
        xhr.send(JSON.stringify(data));
    })
}

最后执行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执行为：

promise.then(
 function (config) {
        return config;
    }, 
    function (error) {
        return Promise.reject(error);
    }
)

请求时，执行为：

promise.then(
 this.sendAjax.bind(this), 
    undefined,
)

响应后，执行为：

promise.then(
 function (response) {
        return response;
    }, 
    function (error) {
        return Promise.reject(error);
    }
)

这时我们测试一下拦截器的使用：

function getMsg(){
    axios.interceptors.request.use((config) => {
        console.log('请求拦截:',config);
        return config;
    },err => {
        return Promise.reject(err)
    })
    axios.interceptors.response.use(response => {
        response = {
            message: '响应数据替换',
            data: response
        }
        return response
    },err => {
        console.log(err,'响应错误')
        return Promise.reject(err)
    })
    axios.get({
        url: 'http://localhost:3000/getTest',

    }).then(res => {
        console.log(res);
    })
}

可以在控制台中看到拦截处理的打印输出，证明拦截成功！

5.总结

Axios天然支持Promise的性能让其方便对异步进行处理，同时又利用了Promise对请求进行了拦截，使得用户可以在请求过程中添加更多的功能，对请求的中断能自如操作。它的思想既清新朴实又不落入俗套，具有很好的借鉴意义。

看完这篇文章，你了解了Axios的核心原理了吗？

❤️ 感谢大家

如果你觉得这篇内容对你挺有有帮助的话：

  1. 看到这里了就点个在看支持一下吧，你的[在看]是我创作的动力；

  2. 关注公众号【Web前端严选】，进交流群，定期为你推送好文。

添加个人微信，进群与小伙伴一起玩耍（已经推出）~

前端优选
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
axios核心技术.zip
02-04
项目源码文档，包含所有笔记资源，以及代码，包含axios源代码。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
手写一个axios
weixin_44457030的博客
02-21 538
# 手写一个axios
手写一个简易的axios
qq_54684701的博客
09-09 646
手写一个简易的axios 我们知道，axios是一个经过封装的AJAX库，简化了AJAX繁琐的使用步骤，让我们能够更快地发送axios请求，其实，axios的核心封装并不复杂，我们完全可以自己封装一个简单的axios。 axios的源码简析 axios的核心是一个Axios对象和一个axios函数，axios本身是一个函数，并不是Axios的实例化，但是它具有Axios这个对象上的所有方法，所以axios不是Axios函数的实例化，但在效果上axios具有Axios的实例的全部功能，因为Axios对象上的全
手写axios核心原理，再也不怕面试官问我axios原理，2024年最新CSS外边距塌陷问题
最新发布
2401_83740189的博客
04-11 411
)// 工具方法，实现b的方法或属性混入a;// 方法也要混入进去} else {// 最终导出axios的方法-》即实例的request方法// 混入方法， 处理axios的request方法，使之拥有get,post…方法return req;// 得到最后的全局变量axios四、请求和响应拦截器我们先看下拦截器的使用// 添加请求拦截器// 在发送请求之前做些什么// 对请求错误做些什么});// 添加响应拦截器// 对响应数据做点什么。
手写axios核心原理，再也不怕面试官问我axios原理
weixin_43964148的博客
10-19 1591
手写axios核心原理，再也不怕面试官问我axios原理 手写axios核心原理手写axios核心原理，再也不怕面试官问我axios原理手写axios核心原理一、axios简介axios...
手写axios源码系列二：创建axios函数对象
ThisEqualThis的博客
04-23 539
建议大家先下载 axios 的源码，然后过一遍源码的目录文件，主要文件全部在lib目录下，这里我就不一一介绍了。_Axios.js：axios的构造函数，因为有一个 axios.js，文件名不区分大小写会重复，所以添加了下横杠_Axios防止文件名重复；其中request方法为重点，拦截器功能在这里书写；：适配器，其中有一个方法getAdapter来获取发送请求的方式 xhr 或者 http；axios.js：整个目录的入口文件，创建了axios 函数对象以及对外暴露了一些属性以及方法；
手写axios源码系列一：axios核心知识点
ThisEqualThis的博客
04-21 723
最近从头搭建了一个vue小项目，想使用 axios 作为请求接口的第三方库。结果使用了 axios 这么长时间，想封装一下 axios ，也就是大部分项目中的文件，我居然无法默写出来，create 和 interceptors 这样的 api 都不知道怎么使用；所以决定深入一下 axios 源码，一探究竟 axios 到底是个什么东东。当前 axios 源码版本为。
axios.min.js
12-30
vue使用请求数据axios下载axios.js源文件
axios-0.19.2.zip
08-27
axios.min.js下载
若依之中对于axios的封装
06-09
若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依...
vue axios封装 axios 请求
03-27
vue axios封装 axios 请求
vue+ts下对axios的封装实现
10-15
主要介绍了vue+ts下对axios的封装实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
手写 Axios 源码（使用 TypeScript）
qq_45777332的博客
05-20 195
Axios 是一个流行的基于 Promise 的 JavaScript HTTP 客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。本文将引导您使用 TypeScript 手写 Axios 的简化版本，以帮助您更好地理解其内部工作原理。这段代码是一个使用TypeScript编写的简化版Axios类。Axios是一个流行的HTTP请求库，用于在浏览器和Node.js中发送HTTP请求。* 发起一个HTTP请求* @param config 请求配置。
面试官不要再问我 axios 了？我能手写简易版的 axios
LuckyWinty的博客
12-15 233
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群作为我们工作中的常用的ajax请求库，作为前端工程师的我们当然是想一探究竟，axios究竟是如何去架构整个框架，中间的拦截器、适配...
手写axios
张三军的博客
02-10 531
//创建Axios类 function Axios(config) { this.defaults = config; //添加defaults默认属性 this.interceptors = { //添加拦截器属性 request: new InterceptorManager(), //添加管理存储拦截器中方法的实例 response: new InterceptorManager() } } //拦截器管理类 function Interce
手写简单实现axios
weixin_43443341的博客
09-03 877
手写实现简单的axios什么是 axios手写实现创建本地文件demo.htmlnode 服务模拟数据axios实现axios({})axios.get()请求和响应拦截器 什么是 axios 关于 axios 是什么，使用 Vue 开发的同学应该不会陌生，具体的 API 也可以参考axios 中文文档 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 （这里只针对浏览器的原理进行阐述） 手写实现 创建本地文件 demo.html <button i
axios的简单封装
qq_39445190的博客
03-21 5407
对axios进行简单的封装
使用原生js封装axios（详解）
weixin_46726346的博客
07-21 6731
摘要 在vue中，我们调用接口使用的都是axios，使用之前我们也会进行一定的封装，然后再进行使用。 在这里，我们主要说一下axios的实现原理，以及如何使用原生的js来自己封装出一个axios。 这里实现出几个主要的方法，包括post请求方法，create配置方法，以及拦截器的方法。 1.post方法 在我们写方法之前，肯定是要先自己写一个类出来，里面的内容先不用写。 然后再在类的下面写出post的方法： function iaxios () { } iaxios.prototype.post = f
java后端与axios交互原理
04-06
Java后端可以提供RESTful API，通过HTTP协议与前端...axios则接收到后端返回的数据，并根据业务逻辑进行相应的处理，例如更新页面数据、展示提示信息等。其中，Java后端和axios之间的数据传输格式可以是JSON、XML等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值