【axios源码】axios流程分析

一、流程图

流程图

1.1 发送请求的方法

axios(config)
axios.request(config)
axios.get(url,config)
axios.head(url,config)
axios.delete(url,config)
axios.options(url,config)
axios.post(url,data,config)
axios.put(url,data,config)
axios.patch(url,data,config)

第一个方法是语法糖具体参考https://www.jianshu.com/p/3a2404ef5566。第二个方法request是axios真正发送请求的方法。后面这些方法只是对request方法的一个封装。他们之间除了method不同之外还有data的区别。其中get、head、delete、options是不会发送data的，这意味着即使data有值，使用这些方法发送请求也是不会包含进去的。

utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url
    }));
  };
});
utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, data, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url,
      data: data
    }));
  };
});

1.2 request函数

request函数可以说是包含了整个请求的全部流程，但是更细节的部分还得看各个函数究竟做了什么。目前只从一个大的角度看整体流程走向。
整个请求执行过程分为三部分：

  1. request拦截器
  2. 请求分发
  3. response拦截器

1.3 拦截器

它的定义在Axios的构造函数中，是2个InterceptorManager的实例。

  this.interceptors = {
    request: new InterceptorManager(),
    response: new InterceptorManager()
  };

InterceptorManager 从本质上讲就是一个事件管理器，基于发布-订阅模式设计的。这不是重点，说简单点就是我们事先通过以下语法向其中添加一些想在请求执行前和请求执行后要做的事情（函数）。在每次request的时候就会把它放在对应的位置执行它。

axios.interceptors.request.use(function resolveFunction(){
},function rejectFunction(){
})

1.4 request函数各个执行过程的组织方式

 var chain = [dispatchRequest, undefined];
  var promise = Promise.resolve(config);
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
    chain.unshift(interceptor.fulfilled, interceptor.rejected);
  });
  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
    chain.push(interceptor.fulfilled, interceptor.rejected);
  });
  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }

首先有核心的请求函数dispatchRequest，这里初始化的时候是两个元素，这是因为异常处理逻辑和正常处理逻辑都放到一个数组里面了，而且后面promise取出参数的时候一次取出的是两个。最关键的是undefined不影响数据传递。

request拦截器中的处理函数是放在dispatchRequest前面，response拦截器是放在dispatchRequest后面。unshif是每次都放在最前面，因此往request拦截器最后添加的函数是最先执行的。

这些函数都被放到promise链中执行，在中间进行数据传递。因此在axios中添加拦截器时一定要注意返回一个结果，将数据传递下去。

1.5 promise链数据传递

数据传递图示
  1. 第一种情况是正常情况，按着正常处理的链进行
  2. 第二种情况是第一步执行报错了，但是在下一个promise的异常处理函数中被捕获到了。这个时候可以选择处理，然后返回正常数据传递给下一个promise的正常处理函数，也可以抛出异常交给下一个promise的异常函数去处理。
  3. 第三种情况第一步执行出错了，但是下一个promise没有异常处理函数，也就是为undefined，这时错误会继续向后传递，直到被某一个promise的异常处理函数捕获。

1.6 请求分发

在这个部分中，axios主要任务是发送http请求，config传到dispatchRequest函数中，这个时候config中给的data和headers不一定是http请求直接可以拿来用的。因此它先对data和headers进行了处理：

  1. config.headers = config.headers || {};防止headers没有传递的情况，初始化
  2. 根据config.transformRequest的函数对其变化，默认的处理是
    1. 对headers的【Accept、Content-Type】两个属性大小写的兼容，因为ajax请求对headers大小写是有严格要求的。
    2. 对特定数据进行检查，一般发送的data是字符串，但也不乏文件、二进制、流数据等，如果是FormData、ArrayBuffer、Buffer、Stream、File、Blob就不用处理。
    3. 对ArrayBufferView取其中的buffer（这个数据类型没见过）
    4. 如果是URLSearchParams 还需要设置content-type为application/x-www-form-urlencoded;charset=utf-8 然后再将其转换成字符串
    5. 发送普通的object，普通的object需要转换成字符串。Object转换需要用json序列化
  3. 将config中所有包含headers的位置合并，有config.headers.common，config.headers[method]，config.headers，并删除headers中多于的属性
  4. 获取发送ajax请求的adapter（因为axios还提供了nodejs的版本，所以这里他会判断环境而选择适合的adapter），并发送请求（细节见axios封装ajax请求）
  5. 对于ajax请求的结果进行处理，处理过程是放在请求promise的then方法中，具体处理是如果结果是字符串类型，尝试用JSON将其转换成对象。如果转换失败，返回原始数据，否则返回转换好之后的数据。
  6. 对请求promise的异常进行处理，处理方式如下：
    1. 判断异常类型如果是【取消请求】（指包含属性__CANCEL__，且其值为true），那么将这个异常传递下去Promise.reject(reason)
    2. 如果是其他异常使用config.cancelToken这个属性尝试抛出一个【取消请求】的异常（如果没有手动调用取消请求的函数，它会什么也不做，否则才会抛出一个异常）。需要手动抛出取消请求的异常是因为取消请求时是由onabort抛出的ECONNABORTED异常， 但是此时在config.cancelToken中做了标记，所以每当有异常出现会手动尝试抛出一下异常
    3. 如果进行到这一步，说明不是【取消请求】的异常，这时对异常携带的data做出处理。

二、手写一个简单的promise链，将函数顺序执行

function Chain(data){
    if(!(this instanceof Chain)){
        return new Chain(data)
    }
    this.chain = []
    this.data = data
}

//尾部添加
Chain.prototype.use = function use(resolve_handler,reject_handler){
    this.chain.push(resolve_handler,reject_handler)
    return this
}

//执行
Chain.prototype.exec = function exec(){
    var promise = Promise.resolve(this.data)
    var chain = this.chain
    while(chain.length > 0){
        promise = promise.then(chain.shift(),chain.shift())
    }
    return promise
}
function b1(data){
    console.log("b1",data)
    throw new Error("b1 error")
    return data + 1
}
function b2(err){
    console.log("err")
    // return 100
}
function kernel(data){
    console.log("kernel",data)
    return data + 1
}
function a1(data){
    console.log("a1",data)
    return data + 1
}

Chain(0).use(b1).use(kernel).use(a1).exec().then(function(data,e){
    console.log(data)
}).catch(function h(err){
    console.log(err)
})

三、完整Axios定义代码

function Axios(instanceConfig) {
  this.defaults = instanceConfig;
  this.interceptors = {
    request: new InterceptorManager(),
    response: new InterceptorManager()
  };
}

Axios.prototype.request = function request(config) {
  /*eslint no-param-reassign:0*/
  // Allow for axios('example/url'[, config]) a la fetch API
  if (typeof config === 'string') {
    config = arguments[1] || {};
    config.url = arguments[0];
  } else {
    config = config || {};
  }
  config = mergeConfig(this.defaults, config);
  // Set config.method
  if (config.method) {
    config.method = config.method.toLowerCase();
  } else if (this.defaults.method) {
    config.method = this.defaults.method.toLowerCase();
  } else {
    config.method = 'get';
  }

  // Hook up interceptors middleware
  var chain = [dispatchRequest, undefined];
  var promise = Promise.resolve(config);

  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
    chain.unshift(interceptor.fulfilled, interceptor.rejected);
  });

  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
    chain.push(interceptor.fulfilled, interceptor.rejected);
  });

  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }
  return promise;
};

Axios.prototype.getUri = function getUri(config) {
  config = mergeConfig(this.defaults, config);
  return buildURL(config.url, config.params, config.paramsSerializer).replace(/^\?/, '');
};

// Provide aliases for supported request methods
utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url
    }));
  };
});

utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, data, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url,
      data: data
    }));
  };
});
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,922评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,591评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,546评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,467评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,553评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,580评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,588评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,334评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,780评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,925评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,573评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2赞 352