模拟axios的创建[ 实现调用axios()自身发送请求或调用属性的方法发送请求axios.request() ]

简介: 模拟axios的创建[ 实现调用axios()自身发送请求或调用属性的方法发送请求axios.request() ]

■ axios创建的源码:

□ 起初axios【instance=bind(Axios.prototype.request, context);】是一个函数,在调用axios(config)函数发送请求时,实际上是调用Axios.prototype.request(config) 方法

□ 在后续【 utils.extend(instance, Axios.prototype, context);】又将Axios原型上的方法属性添加到instance身上。所以axios可以调用属性axios.request(config)发送请求

❀ 我们知道直接调用axios(config) 发送Ajax请求,实际上是通过Axios.prototype.requst(config) 发送Ajax请求


✿ 模拟axios的创建代码如下(bind函数的作用:主要是修改this指向,指向axios的实例):

<script>
    //构造函数
    function Axios(config) {
        //初始化
        this.defaults = config;//default默认属性
        this.intercepters = {
            request: {},
            response: {}
        }
    }
    //为类的原型添加相关方法
    Axios.prototype.request = function (config) {
        console.log('发送ajax请求,请求类型:' + config.method)
    }
    Axios.prototype.get = function (config) {
        return this.request({method: 'GET'})
    }
    Axios.prototype.post = function (config) {
        return this.request({method: 'POST'})
    }
    //声明函数
    function createInstance(config) {
        //实例化一个对象
        var context = new Axios(config); //实例对象可以调用方法,例如 context.get() 但是不能直接当函数使用 context() ×
        var instance = Axios.prototype.request.bind(context);//instance 是一个函数,并且可以 instance({}),
        // 但是因为bind返回的是一个函数(一个拥有了Axios.prototype.request() 方法的函数,而instance的参数就是Axios的实例),所以不能 instance.get()
        //将Axios.prototype 对象中的方法添加到instance函数中,让instance拥有get、post、request等方法属性
        Object.keys(Axios.prototype).forEach(key => {
            // console.log(key); //修改this指向context
            instance[key] = Axios.prototype[key].bind(context);
        })
//总结一下,到此instance自身即相当于Axios原型的request方法,
//然后又给instance的属性添加了上了Axios原型的request、get、post方法属性
//然后调用instance自身或instance的方法属性时,修改了this指向context这个Axios实例对象
        //为instance函数对象添加属性 default 与 intercetors
        Object.keys(context).forEach(key => {
            instance[key] = context[key];
        })
        // console.dir(instance);
        return instance;
    }
    //测试一下axios的创建过程
    let axios = createInstance();
    //发送Ajax请求
    axios({method: 'POST'});
    axios.post({});
</script>
目录
相关文章
|
21天前
|
前端开发 API
Axios请求成功和失败时分别执行哪个函数?
Axios请求成功和失败时分别执行哪个函数?
15 1
|
2月前
|
JSON 数据格式
使用axios发送get和post请求
使用axios发送get和post请求
32 0
|
4月前
|
前端开发
Axios请求成功和失败时分别执行哪个函数?
Axios请求成功和失败时分别执行哪个函数?
|
4月前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
|
4月前
|
前端开发
Axios 请求响应结果的结构
Axios 请求响应结果的结构
|
12天前
axios中的get带参数的请求方法
axios中的get带参数的请求方法
|
4月前
|
资源调度 前端开发 JavaScript
Vue3中如何使用axios进行Ajax请求?
Vue3中如何使用axios进行Ajax请求?
113 1
|
1月前
|
数据采集 JavaScript 前端开发
利用axios库在Node.js中进行代理请求的实践
利用axios库在Node.js中进行代理请求的实践
|
1月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
2月前
|
资源调度 JavaScript API