Axios 构造函数

lib/core/axios.js

...
var intercaptorManager = require(./IntercaptorManger);
var dispatchRequest = require(./dispatchRequest);

intercaptorManager 拦截器构造函数,添加拦截器,删除拦截器和拦截器执行

lib/core/IntercaptorManger.js

function IntercaptorManger() {
this.handlers = [];
} //在构造函数IntercaptorManger原型上添加use方法 添加对象到handlers中并返回下标
IntercaptorManger.prototype.ues = function use(fulfilled, rejected) {
this.handlers.push({
fulfilled: fulfilled,
rejected: rejected,
});
return this.handlers.length - 1;
} //在构造函数IntercaptorManger原型上添加eject方法, 移除handlers对应下标的对象
IntercaptorManger.prototype.eject = function eject(id) {
if(this.handlers[id]){
this.handlers[id] = null
}
} //在构造函数IntercaptorManger原型上添加forEach方法, 使handles对象一一传参到参数函数fn并执行
IntercaptorManger.prototype.forEach = function forEach(fn) {
utils.forEach(this.handlers, function forEachHandler(h) {//h表示this.handlers中具体的项
if(h !== null) {
fn(h)
}
})
}

dispathchRequest

用来处理config和调用默认adaptor的方法,同时做输入输出数据转化

lib/core/dispatchRequest

functuon throwIfCancellationRequest(config) {
config.cancelToken && config.cancelToken.throwIfRequest();
}
function transformData(data, headers, fns) {
utils.forEach(fns, function transform(fn) {
data = fn(data, headers)
})
}
function dispatchRequest(config) {
throwIfCancellationRequest(config);
config.headers = config.headers || {};
//tansformRequest用在发送数据前修改请求数据,数组类型,单个项为方法
//单个项方法中接受2个数据分别为config.data 和 config.headers, 必须返回data
configData = transformData(config.data, config.headers, config.transfromRequest);
//浅合并通用herders配置,方法headers配置以及自定义headers配置,层级逐渐增高
config.headers = utils.merge(config.headers.common || {}, config.headers[config.methods] || {}, config.headers);
//删除config.header[xxx]上的对象,已经合并到config.header上了, 可能并不存在
utils.forEach(['delete', 'get', 'head', 'post', 'put', 'patch', 'common'], function clearHeaderConfig(method) {
delete config.headers[method]
}) var adapter = config.adapter || defaults.adaptar;
//通过适配器向服务端发送请求,适配器方法返回通过promise包裹了
return adaptar(config).then(function onAdapterResolution(response) {
throwIfCancellationRequest(config);
//tansformResponse用在收到数据后修改响应数据,数组类型,单个项为方法
response.data = transformData(response.data, response.headers, config.transformResponse);
return response;
}, function onAdapterRejection(reason) {
if(isCancel(reason)){
throwIfCancellationRequest(config)
if(reason && reason.response) {
reason.response.data = transformData(reason.response.data, reson.response.headers, config.transforResponse)
}
}
return promise.reject(reason)
})
}

Axios 构造函数

lib/core/Axios.js

function Axios(intanceConfig) {
this.defaults = intanceConfig;
this.intercaptors = {
request: new IntercaptorManger(),
response: new IntercaptorManger(),
}
}
Axios.prototype.request = function request(config) {
if(typeof config === 'string'){
config = arguments[1] || {};
config.url = arguments[0];
} else {
config = config || {};
}
config = utils.merge(this.defaults, config);
//设置默认请方法,并转化为小写
if(config.method) {
config.method = config.method.toLowerCase();
} else if(this.defaults) {
config.method = this.defaults.method.toLowerCase();
} esle {
config.methos = 'get';
} var chain = [dispatchRequest, undefined];
var promise = Promise.resolve(config);
//调用Intercaptors.prototype上的forEach方法,对内部handles进行forEach循环,intercaptor表示this.handles中具体某项
this.intercaptors.request.forEach(function unShiftRequestIntercaptors(intercaptor) {
//向数组头部添加一个或者多个参数
chain.unshif(intercaptor.fulfilled, intercaptor.rejected);
})
this.intercaptors.response.forEach(function pushResponseIntercaptors(intercaptor){
//向数组后面添加一个或者多个参数
chain.push(intercaptor.fulfilled, intercaptor.rejected);
})
while(chain.length) {
promise = promise.then(chain.shift(), chain.shift())
}
return promise;
} Axios.prototype.grtUri = function grtUri(config) {
config = utils.merge(this.defaults, config);
//地址 参数, 解析方式
return buildURL(config.url, config.params, config.paramsSerializer).replace(/^\?/g, '');
}
//给Axios原型上挂在具体请求方法,直接使用axios.xxx调用
//不需要参数的请求方法
utils.forEach(['delete, 'get', 'head', 'options'], function forEachMethodNoData(method) {
//地址 参数, 默认参数
Axios.prototype[method] = function(url, config) {
return this.request(utils.merge(config || {}, {method: method, url: url}))
}
})
//需要参数的请求方法
utils.forEach(['post', 'put', 'patch'], function forEachMethosWithData(method) {
Axios.prototype[method] = function(url, data, config){
return this.request(utils.merge(config || {}, {method: method, url: url, data: data, }))
}
})

Axios构造函数学习笔记的更多相关文章

  1. JavaScript构造函数学习笔记

    1 理解Javascript constructor实现原理 在 JavaScript 中,每个函数都有名为“prototype”的属性,用于引用原型对象.此原型对象又有名为“constructor” ...

  2. JavaScript构造函数学习笔记分享

    构造函数就是一个普通的函数,创建方式和普通函数没有区别 不同的是构造函数名习惯上首字母大写 普通函数是直接调用,而构造函数需要使用new关键字来调用 构造函数的执行流程: 立刻创建一个新的对象 将新建 ...

  3. [java学习笔记]java语言核心----面向对象之构造函数

    1.构造函数概念 特点: 函数名与类名相同 不用定义返回值类型 没有具体的返回值 作用:                给对象进行初始化 注意: 默认构造函数 多个构造函数是以重载出现的 一个类中如果 ...

  4. c++拷贝构造函数(翁恺c++公开课[26-27]学习笔记)

    这节课在p26.拷贝构造中讲的很清楚,建议大家耐心的去看下. 什么时候会发生拷贝构造: 对象之间的初始化赋值 使用对象作为变量进行函数传参(通常使用引用来传参从而减去不必要的拷贝构造,提高效率和代码健 ...

  5. axios学习笔记

    axios学习笔记axios文档源地址:https://github.com/axios/axios0.概念axios 在NPM上的描述是:Promise based HTTP client for ...

  6. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  7. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  8. JavaScript权威设计--JavaScript函数(简要学习笔记十一)

    1.函数调用的四种方式 第三种:构造函数调用 如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式,然后传入函数内.这和函数调用和方法调用是一致的.但如果构造函数没有形参,JavaScri ...

  9. JavaScript权威设计--JavaScript函数(简要学习笔记十)

    1.函数命名规范 函数命名通常以动词为前缀的词组.通常第一个字符小写.当包含多个单词时,一种约定是将单词以下划线分割,就像"like_Zqz()". 还有一种就是"lik ...

随机推荐

  1. .NET Core RabbitMQ探索(1)

    RabbitMQ可以被比作一个邮局,当你向邮局寄一封信时,邮局会保证将这封信送达你写的收件人,而RabbitMQ与邮局最主要的区别是,RabbitMQ并不真的处理信件,它处理的是二进制的数据块,它除了 ...

  2. 邮箱图标的css样式

    <div> <div style="position:relative; height:40px;width: 70px;border:2px solid black; m ...

  3. 避免HBase PageFilter踩坑,这几点你必须要清楚

    有这样一个场景,在HBase中需要分页查询,同时根据某一列的值进行过滤. 不同于RDBMS天然支持分页查询,HBase要进行分页必须由自己实现.据我了解的,目前有两种方案, 一是<HBase权威 ...

  4. centos7安装jdk1.7(rpm版)

    一.环境 centos7 jdk-7u80-linux-x64.rpm下载:链接:https://pan.baidu.com/s/10UMrxNE1d2ZbDt7kvBM1yQ   提取码:pmov  ...

  5. Linux nodejs 安装以及配置环境

    从官网中下载nodejs 打开官网 https://nodejs.org/en/download/ 复制拿到链接,下载nodejs wget https://nodejs.org/dist/v10.1 ...

  6. ios路线

    http://www.cocoachina.com/ios/20150303/11218.html

  7. [b0011] windows 下 eclipse 开发 hdfs程序样例 (三)

    目的: 学习windows 开发hadoop程序的配置. [b0007] windows 下 eclipse 开发 hdfs程序样例 太麻烦 [b0010] windows 下 eclipse 开发 ...

  8. pycharm 使用Git提交代码到Github

    pycharm 使用Git提交代码到Github pytharm 创建django项目,提交到github总是失败,在github创建项目拉下来后项目层级会多一层,为此查了一些资料,亲测如下方式可行. ...

  9. 201871020225-牟星源《面向对象程序设计(java)》第十三周学习总结

    201871020225-牟星源<面向对象程序设计(java)>第十三周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  10. 第一个java小程序

    程序名:MyFirstJavaProgram.java //package com.example; public class MyFirstJavaProgram { public static v ...