网络请求的方式(XHR,fetch,...)

随着前端的发展，网络请求开始日益发展，那么像XMLHttpRequest，ajax，fetch，axios这些陆续出现，那么这些东西有没有共通点呢，请不要想着他们很复杂其实也非常容易理解。

1.首先XMLHttpRequest是浏览器也就是咱们的宿主提供的一个实现类，咱们通过在js中new出来然后在浏览器的环境中运行,然后通过xhr这个实例，调用其中的方法来实现浏览器与服务器打交道。

//创建一个实现ajax
function ajax(url){
const xhr=new XMLHttpRequest()
xhr.open('get',url,false)
//通过回调函数的方式拿到返回的结果
xhr.onreadystateChange=function(){
//链接成功
if(xhr.readyState===4){
//返回结果为200
if(xhr.status===200){
console.info(xhr.response)
       }
    }
  }
}

不难发现咱们通过xhr这个方式来实现网络通信其实也就是回调函数的方式，然而ajax底层也就是xhr,更具体的说ajax就是一种思想，实际并不是存在的。

2.当我们通过xhr这种方式回调函数的方式去接接收返回值的时候，不难发现会出现一个很明显的问题，也就是回调地狱，简单举个例子：就比如说在第一个回调函数中如果此时此刻我在拿到xhr.response的时候我还需要发送一个网络请求，那么这时候是不是得再通过onreadystatechange呢，如果说我还要呢，那就。。。

果然随着es6中promise的提出，回调地狱问题解决，对应的xhr也该更新换代，这个时候fetch横空出世，当然fetch成为一个API，而不是一个类，大家要理清楚。

function ajaxFetch(){
fetch(url).then((res)=>{return res.json()}.then((data)=>{console.log(data)}))
}

非常简单的链式调用让人爱不释手，这也一下子解决了xhr带来的回调地狱的问题,同时fetch通过数据流传输对象，可以提高网站性能。

3. 然而这么好用的东西人们为啥不用，随着vue的兴起，而是使用主流的axios库呢，axios是xhr的子集，内部改写了xhr的内容，并且提供了一些内置的方法，而且也避免了回调地狱的问题这就导致了占据市场的主流。

总的来说：ajax是一种思想，是通过封装xhr来达到网络请求的目的，而实现网络请求的方式有xhr/fetch，这也是浏览器devTools网络里为啥有这个选项，然而axios是一个库，里边是对xhr实现了改写，同时提供了一些非常实用的拦截方法以及防御措施，具体源码你可以找个文章研究下。