axios的原理

vue自2.0开始，vue-resource不再作为官方推荐的ajax方案，转而推荐使用axios。

按照作者的原话来说：

“Ajax 本身跟 Vue 并没有什么需要特别整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-resource 提供的价值和其维护成本相比并不划算，所以决定在不久以后取消对 vue-resource 的官方推荐。已有的用户可以继续使用，但以后不再把 vue-resource 作为官方的 ajax 方案。”

除了维护成本方面的原因，axios本身的优点也使得它在一众ajax异步请求的框架中脱颖而出，下面我们通过分析部分axios的源码来看看，是什么让axios成为大多数人的选择。

GitHub上axios的主页标注了它具有如下特性：

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

1.同时支持浏览器端和服务端的请求。

由于axios的这一特性，vue的服务端渲染对于axios简直毫无抵抗力。 让我们一起来读读源码，看看它是如何实现的。

在axios/lib/core/dispatchRequest.js文件中暴露的dispatchRequest方法就是axios发送请求的方法，其中有一段代码为：

//定义适配器，判断是在服务器环境还是浏览器环境
var adapter = config.adapter || defaults.adapter;
return adapter(config).then(function onAdapterResolution(response) {
   throwIfCancellationRequested(config);
   // 处理返回的数据
   response.data = transformData(
         response.data,
         response.headers,
        config.transformResponse
   );
   return response;
 }, function onAdapterRejection(reason) {
   if (!isCancel(reason)) {
         throwIfCancellationRequested(config);
     // 处理失败原因
     if (reason && reason.response) {
       reason.response.data = transformData(
             reason.response.data,
             reason.response.headers,
             config.transformResponse
       );
     }
   }
   return Promise.reject(reason);
 });
};

这段代码首先定义了一个适配器，然后返回了适配器处理后的内容。 如果没有在传入的配置参数中指定适配器，则取默认配置文件中定义的适配器，再让我们来看看默认文件/lib/defaults.js定义的适配器：

function getDefaultAdapter() {
 var adapter;
 if (typeof XMLHttpRequest !== ‘undefined‘) {
   //通过判断XMLHttpRequest是否存在，来判断是否是浏览器环境
   adapter = require(‘./adapters/xhr‘);
 } else if (typeof process !== ‘undefined‘) {
   //通过判断process是否存在，来判断是否是node环境
   adapter = require(‘./adapters/http‘);
 }
 return adapter;
}

到这里真相大白，XMLHttpRequest 是一个 API，它为客户端提供了在客户端和服务器之间传输数据的功能；process 对象是一个 global （全局变量），提供有关信息，控制当前 Node.js 进程。原来作者是通过判断XMLHttpRequest和process这两个全局变量来判断程序的运行环境的，从而在不同的环境提供不同的http请求模块，实现客户端和服务端程序的兼容。

同理，我们在做ssr服务端渲染时，也可以使用这个方法来判断代码当前的执行环境。

2、支持promise

/**
* 处理一个请求
*
* @param config 请求的配置
*/

Axios.prototype.request = function request(config) {
 // 如果是字符串，则直接赋值给配置的url属性
 if (typeof config === ‘string‘) {
   config = utils.merge({
     url: arguments[0]
   }, arguments[1]);
 }
 // 合并默认配置和配置参数    
 config = utils.merge(defaults, this.defaults, { method: ‘get‘ }, config);
 config.method = config.method.toLowerCase();
 // 连接拦截器中间件
 var chain = [dispatchRequest, undefined];
 var promise = Promise.resolve(config);
 //依次在处理链路数组中，从头部添加请求拦截器中间件（unshift：可向数组的开头添加一个或更多元素,并返回新的长度。）
 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);
 });

 //依次执行 请求拦截器中间件-> 请求 -> 返回拦截器中间件（shift：用于把数组的第一个元素从其中删除,并返回第一个元素的值。 ）    
 while (chain.length) {
   promise = promise.then(chain.shift(), chain.shift());
 }
 //返回promise对象
 return promise;
}

这一段是axios请求整体流程的核心方法，可以看到请求返回的是一个promise对象。这样可以让我们的异步请求天然的支持promise，方便我们对于异步的处理。

3、支持请求和和数据返回的拦截

依然是上面的核心流程代码，在设置好请求参数后，作者定义了一个chain数组，同时放入了dispatchRequest, undefined这两个元素对应promise的resolve和reject方法，之后将请求拦截器的成功和失败处理依次压入chain数组头部，将返回拦截器的成功和失败处理依次推入chain数组尾部。 最后循环取出chain数组，先依次取出chain数组中成对的请求拦截处理方法，promise执行，然后取出最初定义的dispatchRequest, undefined这两个元素执行请求，最后依次取出chain数组中成对的返回拦截器。

它的流程可以归纳为

resolve(request interceptor fulfilled N),reject(request interceptor rejected N)
-> …
-> resolve(request interceptor fulfilled 0),reject(request interceptor rejected 0)
-> resolve(dispatchRequest ),reject(undefined)
-> resolve(response interceptor fulfilled 0),reject(response interceptor rejected 0)
-> …
-> resolve(response interceptor fulfilled N),reject(response interceptor rejected N)

4、转换请求返回数据，自动转换JSON数据

在axios/lib/core/dispatchRequest.js文件中暴露的核心方法dispatchRequest中，有这样两段：

// 转换请求的数据  
config.data = transformData(
config.data,
config.headers,
config.transformRequest
);

// 转换返回的数据
response.data = transformData(
 response.data,
 response.headers,
 config.transformResponse
);

//axios通过设置transformResponse，可自动转换请求返回的json数据
transformResponse: [function transformResponse(data) {
   /*eslint no-param-reassign:0*/
   if (typeof data === ‘string‘) {
       try {
       data = JSON.parse(data);
       } catch (e) { /* Ignore */ }
   }
   return data;
}],

5、取消请求

文档上给了两种示例：

方法一：

var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get(‘/user/12345‘, {
 cancelToken: source.token
}).catch(function(thrown) {
 if (axios.isCancel(thrown)) {
console.log(‘Request canceled‘, thrown.message);
 } else {
// 处理错误
 }
});
// 取消请求（message 参数是可选的）
source.cancel(‘取消请求‘);

 方法二：

var CancelToken = axios.CancelToken;
var cancel;
axios.get(‘/user/12345‘, {
 cancelToken: new CancelToken(function executor(c) {
   // executor 函数接收一个 cancel 函数作为参数
      cancel = c;
 })
});
// 取消请求
cancel();

这两种方法都可以取消发出的请求。先看具体的流程：

执行 cancel 方法 -> CancelToken.promise获取到resolve -> request.abort(); -> reject(cancel);

下面来看源码是如何实现的。

在xhr.js或http.js中都有这样一段，下面取自/lib/adapters/xhr.js

if (config.cancelToken) {
 // 处理取消请求的方法
 config.cancelToken.promise.then(function onCanceled(cancel) {
   if (!request) {
     return;
   }
   request.abort();
   reject(cancel);
   // 清空请求
   request = null;
 });
}

在请求时如果设置了cancelToken参数，就会监听来自cancelToken的promise，一旦来自cancelToken的promise被触发，就会执行取消请求的流程。

cancelToken的具体实现为(libcancelCancelToken.js)：

/**
* 可以进行取消请求操作的对象
*
* @param {Function} executor 具体的执行方法.
*/

function CancelToken(executor) {
 //判断executor是一个可执行的函数
 if (typeof executor !== ‘function‘) {
   throw new TypeError(‘executor must be a function.‘);
 }
 //定义一个promise的resolve回调
 var resolvePromise;
 this.promise = new Promise(function promiseExecutor(resolve) {
   resolvePromise = resolve;
 });
 var token = this;
 //executor的参数为取消请求时需要执行的cancel函数
 executor(function cancel(message) {
   if (token.reason) {
     // 已经取消了请求
     return;
   }
   token.reason = new Cancel(message);
   //触发promise的resolve
   resolvePromise(token.reason);
 });

}

上面是方法二的源码实现，CancelToken会给自己添加一个promise属性，一旦cancel方法被触发就会执行取消请求的流程。（执行 cancel 方法 -> CancelToken.promise获取到resolve -> request.abort(); -> reject(cancel);）

方法一的源码实现（原理同方法二的源码实现，只是CancelToken.source会返回这个cancel）：

CancelToken.source = function source() {
  var cancel;
  var token = new CancelToken(function executor(c) {
    cancel = c;
  });
  return {
    token: token,
    cancel: cancel
  };
};

利用这个方法，一方面可以在按钮的重复点击方面大显身手，另一方面可以在数据的获取方面直接获取最新的数据。

6、客户端防止xsrf攻击

先来了解一下XSRF，以下内容来自维基百科。

XSRF跨站请求伪造（Cross-site request forgery），是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。

axios是如何防止xsrf攻击的？

// 添加 xsrf 请求头
// 只在标准浏览器环境中才会起作用
if (utils.isStandardBrowserEnv()) {
 var cookies = require(‘./../helpers/cookies‘);
 // 添加 xsrf 请求头
 var xsrfValue = (config.withCredentials || isURLSameOrigin(config.url)) && config.xsrfCookieName ?
     cookies.read(config.xsrfCookieName) :
     undefined;
 if (xsrfValue) {
   requestHeaders[config.xsrfHeaderName] = xsrfValue;
 }
}

首先，axios会检查是否是标准的浏览器环境，然后在标准的浏览器环境中判断，如果设置了跨域请求时需要凭证且请求的域名和页面的域名相同时，读取cookie中xsrf token 的值，并设置到承载 xsrf token 的值的 HTTP 头中。

7、在node端支持设置代理

如果在标准浏览器环境则执行/lib/adapters/xhr.js，axios不支持proxy；如果在node环境运行，用/lib/adapters/http.js，支持proxy。

在组内的一个项目中，使用了vue的ssr服务端渲染的技术，其中ajax方案就是采用了axios。由于ssr是在服务端请求，因此在开发、测试、上线的过程中需要相应的host环境。例如在开发过程中，要么需要在程序的请求地址中写上ip地址替代域名，要么需要设置电脑的host文件，改变域名映射的ip地址。而在测试环境中，同样需要更改代码或者测试环境的host文件。这样一来，如果是改代码的方案则影响了代码的稳定性，每一次部署都需要修改代码；如果是修改host文件，则会影响环境的一致性，假如环境还部署了其他的服务，还会影响其他服务的测试。因此我们组内的男神便使用了axios的proxy功能，轻松的解决了这一问题。

//判断当前的部署环境
const isDev = process.env.NODE_ENV !== ‘production‘
if(isDev){
   let proxy = null;
   //如果不是线上环境，且配置了代理地址则进行代理的设置,devHost是具体的ip配置
   if(devHost.https){
       proxy = {
       host: devHost.https,
       port: 443
       };
       Axios.defaults.proxy = proxy;
   }else if(devHost.http){
       proxy = {
           host: devHost.http,
           port: 80
       };
       Axios.defaults.proxy = proxy;
   }else {
       //do nothing
   }
}

而在axios的源码/lib/adapters/http.js中，则是如此实现代理的：

//如果设置了代理
if (proxy) {
 //取代理的域名为请求的域名
 options.hostname = proxy.host;
 options.host = proxy.host;
 options.headers.host = parsed.hostname + (parsed.port ? ‘:‘ + parsed.port : ‘‘);
 options.port = proxy.port;
 options.path = protocol + ‘//‘ + parsed.hostname + (parsed.port ? ‘:‘ + parsed.port : ‘‘) + options.path;
 // Basic proxy authorization
 if (proxy.auth) {

   zar base64 = new Buffer(proxy.auth.username + ‘:‘ + proxy.auth.password, ‘utf8‘).toString(‘base64‘);
   options.headers[‘Proxy-Authorization‘] = ‘Basic ‘ + base64;
 }

}

内部一些针对具体项目环境的二次封装

上面基于源码具体分析了axios的各项特性，下面再来讲一讲我们在具体使用时的一些二次封装。由于axios使用get方式设置参数时，都需要使用params的方式，例如：

axios.get(‘/user‘, {
   params: {
     ID: 12345
   }
 }).then(function (response) {
   console.log(response);
 }) .catch(function (error) {
   console.log(error);
 });

而之前使用vue-resource则习惯直接写上参数，形如：

axios.get(‘/user‘,
   {
     ID: 12345
   }
 ) .then(function (response) {
  console.log(response);
 }).catch(function (error) {
   console.log(error);
 });

因此，对于组内的axios统一加了一层封装，承接之前的使用习惯：

let get = Axios.get;
/**
* 对原方法的get做一层装饰，可以传参时不必写params参数，直接传递参数对象，同时对已有的params写法兼容
* @param args 参数 url config
* @returns {*}
*/
Axios.get = (...args) => {
   let param = args[1];
   //如果以参数方式传递query，同时不存在axios需要的key：params，则为它添加
   if (param && !param.hasOwnProperty(‘params‘)) {
       args[1] = {
           params: param
       }
   }
   return get(...args)
}

这里需要注意的是，要确保在提交到服务端的query参数中不包含‘params’字段，不然还是要使用默认的参数格式。

而对于post方式，则做了如下封装：

let post = Axios.post;
/**
* axios的post请求默认会依据数据类型设置请求头，但是目前后台没有识别json，因此统一将请求的数据设置为x-www-form-urlencoded需要的字符串格式
* @param args 参数 url data config
* @returns {*}
*/
Axios.post = (...args) => {
   let data = args[1];
   //判断是对象就转化为字符串
   if (data && typeof data === ‘object‘) {
       args[1] = qs.stringify(data)
   }
   return post(...args)
}

axios使用方便，功能齐备强大，其中的一些编程思想也很不入俗套，是一款前后端通用的ajax请求框架，目前在github上已经有接近36K的赞，其优秀程度可见一斑。本文通过他的一些特性，分析了部分源码，旨在能够在使用它的同时，更加懂得它。

转自：https://www.cnblogs.com/zhuanzhuanfe/p/8458421.html

另外可参照阅读：https://blog.csdn.net/weixin_44475093/article/details/111940352