手写一个简易的axios

手写一个简易的axios

我们知道，axios是一个经过封装的AJAX库，简化了AJAX繁琐的使用步骤，让我们能够更快地发送axios请求，其实，axios的核心封装并不复杂，我们完全可以自己封装一个简单的axios。

axios的源码简析

axios的核心是一个Axios对象和一个axios函数，axios本身是一个函数，并不是Axios的实例化，但是它具有Axios这个对象上的所有方法，所以axios不是Axios函数的实例化，但在效果上axios具有Axios的实例的全部功能，因为Axios对象上的全部属性和方法都被拷贝到了axios上，或者说，axios是Axios。prototype.resquest函数的bind（）返回的函数，这个bind（）使axios的this指向了Axios。

request函数串联流程

从流程上来看，整个axios可以分为三个部分，分别是负责请求的resquest，负责处理输入，输出数据的dispathRequest，以及封装AJAX的xhr部分。在resquest中，通过promise的链式调用讲各个部分串联在一起，通过unshift将请求拦截器放置于dispathRequest函数之前，用push将响应拦截器放置于处理函数之后（所以先设置的请求拦截器后执行；先设置的相应拦截器先执行），在要执行dispathRequest函数时，用shift和pop取走拦截器，得到dispathRequest函数并执行。在这个步骤中，每组拦截器分别有成功和失败两组回调函数，因此每次添加，取出拦截器都是两两进行的，因此在promise串联时，源码连续使用了两组shift进行处理，因此中间的dispathRequest函数也必须是两组，因此源码中使用了一个undefined进行占位。

request这个方法是post，get，put，delet等方法的父类，这些方法本质上都是对resquest的继承

dispathResquest函数处理数据

dispathResquest基本流程：处理data数据，调用xhr发送请求，转化响应数据，返回promise

这个部分会对data数据做一些基本的处理，它会根据data中数据的类型来对数据进行处理，如果传过来的参数是一个对象，那么它就会调用JSON.stringify方法将data中对象转化为json格式，这就是为什么我们使用axios时传的参数不一定非要说json的原因，同时，axios会自动给将请求头设置为json格式；如果传过来的参数不是对象格式，那么axios会将格式转为字符串，并将请求头改为urlencoded格式；如果传过来的数据是以流的格式传输，axios不会自动设置请求头，但会将数据转化为buffer格式。

在处理完data后，dispathResquest会调用xhr发送请求，在成功后获取返回值并进行处理，当返回值是一个字符串时，axios会调用try方法尝试将数据用JSON.parse转化为json格式，如果无法转化会抛出并捕获，忽略异常。直接原样返回。

xhr部分

xhr是处理AJAX的主要部分，它返回一个promise。在进入这个部分时，xhr首先创建一个XHR对象，根据传入的参数config设置的默认值进行初始化，并用param这个参数尝试恢复完整url，在完成请求后会创建一个response对象，用结构赋值的方法将请求头，报文，数据的值赋给response。在这个步骤中会绑定大量的监视函数，比如ontimeout（监听是否超时）；onUploadProgress(用于监听下载进度)，同时会做一些基本的判断来防止异常，比如当requestData为undefined或请求被取消时，会将其置为null。

（在xhr的error中有一个toJSON方法，用于将error对象json格式化）

实现一个简易的axios

我们这个简易的axios只关注xhr部分，不对拦截器，dispathResquest进行处理，能完成的功能仅仅是发送请求，携带参数，接收返回值。

`  

 function axios(