Axios API(v0.21)

使用过Promise和XMLHttpRequest，掌握Promise的API和XMLHttpRequest的API，会比较容易接受Axios；Axios目前可以用在客户端以及nodejs服务端，两者使用的网络请求有些不一样，前者使用XMLHttpRequest创建请求request，后者使用nodejs内置的http或https模块创建请求request，但它们给用户的接口是一样的；使用<script>链接的Axios脚本只用在客户端，模块化或在nodejs环境下使用的可以用node打包管理器(npm)下载(node以及客户端都能用)；本篇文章记录的是基于客户端的Axios；看的是最新版本的源码，会有某些地方的描述跟较早版本的不一样、某些方法如options或属性是较早版本没有的；

1，Axios的特性：

支持Promise API；Axios就是基于 Promise实现的；

拦截请求和响应；在拿到axios时，可以设置this.request.use方法添加请求拦截器，这样在发送网络请求前拦截下请求；

转化请求和响应数据；

取消请求；

自动转化JSON数据；自动stringify JSON数据

客户端防御CSRF；

2，API: Axios为环境提供一个全局变量axios或axios模块；axios简单地可以说是Axios.prototype.request，只是它不是这么简单得来的；在源码中，axios的得来是：创建Axios实例作为Axios.prototype.request的this指向(也就是说用默认的配置defaultConfig创建的Axios实例——之后都将其称为‘默认的Axios实例’，然后Axios.prototype.request进行'绑定'，即是个调用request方法的闭包函数)， 以及和Axios.prototype对象的合并且Axios.prototype对象的方法都用那个用默认配置创建的Axios实例作为this的指向，以及和默认的Axios实例的合并，默认的Axios实例有自身的属性：interceptors(是个对象{request: InterceptorManager, response: InterceptorManager} 分别是请求拦截器、相应拦截器的管理对象) 和 defaults(instance config)；所以说刚开始拿到的axios变量是个拥有默认配置的网络请求工具，若不需要重新配置可以直接使用，当需要重新配置一些信息的时候，可以使用axios.create(newConfig)的方法重新创建一个axios，这个新创的axios跟Axios脚本给我们的axios变量是一样的结构，只是它们使用的配置不一样，也不是继续使用默认的Axios实例对哪些方法进行绑定而是用newConfig创建的Axios实例，说到底就只是配置config不一样，所以不用担心接口不一样之类的；

a, Axios.prototype：Axios.prototype.getUri，Axios.prototype.post， Axios.prototype.put，Axios.prototype.patch， Axios.prototype.get，Axios.prototype.options，Axios.prototype.delete，Axios.prototype.head，Axios.prototype.request；

post， put，patch， get，options，delete，head，方法都调用Axios实例方法request，并返回该方法的返回值，返回值是个Promise实例；post， put，patch方法都可以接收3个参数url, data, config 如 post(url, data, config); url是个；get，options，delete，head方法则都可以接收2个参数url, config如get(url, config); ；以及axios也可以作为发送请求的方法即axios(config).then(fn)...;

Axios.prototype.request：该方法做了什么？该方法可以接受2个或1个参数，即request(url, config)或request(config)或request(url)；url是请求路径字符串；config是个对象；config与默认的config或axios.create(defaultConfig)的defaultConfig进行合并，之后调用Promise.resolve(mergeConfig).then(dispatchRequest)创建并发送网络请求，但若是axios有请求拦截器，会先调用拦截处理函数，之后才会执行到dispatchRequest方法(dispatchRequest方法中，转化请求数据，调用adapter，转化响应数据；adapter实现了XMLHttpRequest的创建和请求事件的监听以及处理请求取消等逻辑)，若有响应拦截器，会在得到响应之后执行拦截器；数据如请求数据、响应数据是如何在拦截器之间辗转的？  利用promise以及promise.then方法返回一个pending状态的promise，while(arr.length){ promise=promise.then(arr.shift(), arr.shift());}，类似于当如arr.length = 4时, promise.then(arr.shift(), arr.shift()).then(arr.shift(), arr.shift())的顺序执行；

config参数：它有这些属性：method，默认是get，method可以是具体某个方法调用request给的比如调用put方法，那么method是'put'；url，请求路径字符串，当request接受一个对象参数config时，url可以写在config中；data，请求数据，它可以是来自如put方法的第二个参数，也可以是来自如get方法的第二个参数config的data属性；headers，是个对象，可以有这些属性common(默认值{Accept: 'application/json, text/plain, */*'}，请求头，客户端希望接收到的数据类型)，get/header/delete(默认值{})，post/put/patch(默认值{'Content-Type': 'application/x-www-form-urlencoded'}，请求体类型，客户端发送的数据的类型)，根据data类型的不同，headers可以有不同的值，传送给服务端的config；params，是个对象，URL的查询键值对；auth，是个对象{password, username}，用于生成headers.Authorization，可以用于在服务端生成一个Token；'baseURL'，基路径，用于与相对路径合成一个fullpath； 'transformRequest'，是个函数数组，用于转换请求数据，有默认值；'transformResponse'，是个函数数组，用于转换响应数据，有默认值；'paramsSerializer'，是个函数，用于序列化config.params； timeout，是个数字，默认单位是秒，用于设置网络请求允许的超时时长，若超时触发request.ontimeout处理函数； timeoutErrorMessage，是个用于new Error(message)的信息，当请求触发ontimeout时使用； adapter，是个返回Promise实例的的函数，Axios有默认的adapter，一般情况下，我们不需要覆盖默认值； responseType，是个字符串'text'或其他值，若是'text'，则会响应数据拿的是 xmlRequest.responseText，否则是xmlRequest.response； xsrfCookieName，敏感的跨域cookie键名，默认'XSRF-TOKEN'若检测到cookie存在该键名，会用decodeURIComponent函数解码该键值；headers.xsrfHeaderName是headers.xsrfCookieName解码后的值； onUploadProgress，上传进度progress的处理器，只当环境支持xmlRequest.upload可用；onDownloadProgress，是个xmlRequest加载进度progress的处理器；maxContentLength，默认值-1，表示没有限制，由协议决定； maxBodyLength，默认值-1， 表示没有限制，由浏览器的默认行为或设置决定；cancelToken，CancelToken实例，用于作为取消请求的标注(具体如何？其实是给cancelToken属性promise传递一个回调函数，该回调做的事情是xmlRequest.abort()中止请求，(暂不知请求中止后有什么表现!)，这个回调也只有在promise解析resolve后才执行，而resolve的逻辑包装在函数中交给CancelToken之外的环境，这样可由用户决定在什么时候cancel请求)；

data的数据类型：FormData，ArrayBuffer ，Stream，Blob， File， String(这几种数据类型可以直接传输给服务端)； URLSearchParams(传输的数据需要 data.toString()), arrayBufferView如Int16Array(传输的数据是 data.buffer)；Object，Array， JSON，null(传送的是JSON.stringify(data))；

CancelToken：有两种方式可以使用CancelToken实例(这里说的取消跟中止是同种意思)；1是使用Cancel.source()返回CancelToken对象token以及cancel方法；(token作为config.cancelToken的值，以嚷内部逻辑传递一个回调以在需要时取消请求)，调用cancel方法中止请求；2是用一个函数function executor(fn){cancel = fn} new CancelToken(executor); 那么new出来的实例作为config.cencalToken的值，而cancel接收到的函数将作为取消请求而被执行；

CancelToken具体做了什么：CancelToken.prototype.throwIfRequested()用于判断是否已中止请求，若是，会在某些恰当的位置throw一个错误信息中止程序；在promise抛出的错误或reject的信息(Promise的reject行为也会抛出一个错误)，可以使用下一次的reject回调或catch方法捕获错误；CancelToken.source()是使用取消请求功能的简化版本，相对于手动new一个CancelToken实例来说；CancelToken实例属性promise是个Promise对象，就是它在内部使用config.cancelTokan时config.cancelToken.promise.then(callback)接收回调；

Cancel具体做了什么： Cancel实例充当一个Error对象；在内部，它可以被当作错误信息，只是这个错误信息是cancel类型的，在取消请求时，Cancel实例存储中止的message，在适当位置利用throw语句抛出；Cancel.prototype.toString()；Cancel.prototype.__CANCEL__(默认值true)；Cancel实例属性message，其值可以是上边提到的cancel方法传递的参数；

config.cancelToken有什么用处：用于接收回调，该回调执行xmlRequest.abort()；

Axios.prototype.getUri(config)：该方法做了？axios.defaults和config合并后的url和params合成一个较完整的uri；config可以是个{url, params, paramsSerializer}的对象；

响应结构response：data(服务器提供的数据)，headers(服务器响应头，每个header名称都是小写)，config(axios请求的配置信息)，status(来自服务器的HTTP状态码)，statusText(来自服务器的HTTP状态信息)，request(浏览器中则是 XMLHttpRequest 实例)；

b, Axios实例：有两个实例属性，interceptors是个有着request和response属性的对象，request是用来管理请求拦截器，response用来管理响应拦截器，两者都是InterceptorManager实例；defaults是创建Axios实例时，传进来的配置信息对象；

InterceptorManager：该构造函数实现了拦截器的存储、移除、遍历调用所有拦截器；InterceptorManager.prototype.use(fulfilled,rejected)：传入两个参数fulfilled和rejected都是函数，fulfilled会在上一个拦截器resolve之后执行，rejected会在上一个拦截器出错或reject时执行，不管经过几个拦截器的resolve，最终的config都应该从拦截器中转交到dispatchRequest函数，所以每个fulfilled函数都会接收config对象并return回config对象或者return promise并resolve回config对象(当然resolve回config对象是对于请求拦截器而言，对响应拦截器应该是响应数据)，而rejected的执行意味着不会执行到dispatchRequest函数，这意味着不会创建以及发送网络请求；InterceptorManager.prototype.use的返回值是个number，是fulfilled和rejected在interceptorManager.handlers的位置；InterceptorManager.prototype.eject(id)，用于移除之前用use方法添加的拦截器，参数id是InterceptorManager.prototype.use方法的返回值；InterceptorManager.prototype.forEach(fn) 用于遍历所有拦截器(所有请求拦截器或者所有的响应拦截器)；

c, 暴露在环境的变量axios：axios的静态属性或方法：axios.Axios, axios.Cancel, axios.CancelToken,axios.isCancel,axios.create,axios.spread,axios.isAxiosError,axios.all; 以及上述说到的Axios实例的属性或方法即axios.interceptors、axios.defaults，以及经过包装处理的Axios.prototype的方法或属性即axios.put、axios.get、axios.request等；

axios.Axios，暴露Axios构造函数；axios.Cancel，暴露Cancel构造函数Cancel实例属性message，存储取消请求的信息，axios.CancelToken， 暴露CancelToken构造函数，可使用CancelToken.source()静态方法返回一个对象{token: CancelToken, cancel: Function},config.cancelToken的值就是来自CancelToken.source().token；axios.isCancel(obj)，函数，用于判断一个对象是否是Cancel对象，axios.create(config)，函数，用于创建一个axios；axios.spread(callback)，用于扩展函数，返回一个经过扩展的函数，所谓的扩展是允许返回的函数传入数组作为参数，内部利用apply函数将数组传递给callback函数；axios.isAxiosError(error)，函数，判断一个Error对象是否是来自Axios的，请求出错xmlRequest.onerror以及中断xmlRequest.onabort处理器中创建了 isAxiosError为true的error；axios.all(promiseArr)，利用Promise.all(promiseArr)，返回值是promise对象；

参考文档：

Axios

XMLHttpRequest

throw 语句；利用throw语句中止程序的执行，直接throw错误 将中止并清空当前的函数调用栈；但是不会影响浏览的事件循环、剩下任务的执行；若有try...catch...语句捕获错误，则错误不会被抛出，不会影响try...catch语句之后的程序，简单地理解就是抛出的错误(catch语句里也可以抛出错误)在被捕获之前，程序不会被正常执行；