手写axios核心原理，再也不怕面试官问我axios原理

最新推荐文章于 2024-04-11 02:05:44 发布

前端阳光

最新推荐文章于 2024-04-11 02:05:44 发布

阅读量3.5k

点赞数 2

分类专栏：手写核心原理系列文章标签： html5 css3 前端 ui css

本文链接：https://blog.csdn.net/weixin_43964148/article/details/124254081

版权

文章目录

一、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对象来对结果进行处理。

有什么不理解的或者是建议欢迎评论提出.项目已经放到
github：https://github.com/Sunny-lucking/howToBuildMyAxios

二、基本使用方式

axios基本使用方式主要有

axios(config)
axios.method(url, data , config)

// index.html文件
<html>
<script type="text/javascript" src="axios"></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', 'hea

最低0.47元/天解锁文章

前端阳光

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
手写axios核心原理，再也不怕面试官问我axios原理

文章目录一、axios简介axios是什么？axios有什么特性？（不得不说面试被问到几次）二、基本使用方式三、实现axios和axios.method四、请求和响应拦截器一、axios简介axios是什么？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios有什么特性？（不得不说面试被问到几次）从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据
复制链接

扫一扫