ajax，axios和fetch的区别

1. 原生ajax

原生ajax需要在每次异步请求时创建一个XMLHttpRequest对象，通过这个对象可以从服务器获取数据

let xhr = new XMLHttpRequest(); xhr.open('get', 'test.php'); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState===4 && xhr.status===200){ console.log(xhr.responseText); } }

基本步骤：

创建XMLHttpRequest对象调用open方法设置请求信息：方法，请求路径，是否异步设置发送的数据和请求头（setRequestHeader），并使用send方法向服务器发送请求注册onreadystatechange监听请求当readyState为4，status为200，执行回调函数拿到返回值

原生ajax兼容性好，存在嵌套回调的情况，另外代码复杂

2. jqueryAjax

jquery的ajax就是在原生ajax的基础之上进行了封装，使得书写ajax时更加简单

$.ajax({ url: "test.php", type: "get", data: "name=xf&age=21" success: function(data){ console.log(data); } })

jquery也存在嵌套回调，并且只为jqueryAjax就引入整个jquery，文件比较大成本过高

3. fetch

fetch是window对象中的一个方法，fetch是基于Promise设计的，所以能够解决回调地狱问题

fetch("test.php", { method: "post", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: new URLSearchParams([["username", "Lan"],["password", "123456"]]).toString() }).then(res=>{ return res.json() }).then(data=>{ console.log(data); // 第二个then中才能真正拿到数据 })

fetch基于promise能够解决回调地狱，并且直接调用更方便，fetch默认情况不带cookie，需要手动添加，并且fetch是window对象中的方法，目前浏览器支持情况不是很友好

4. axios

axios是一个第三方库，也是对XHR的一种基于Promise的封装，axios算比较完美

// 需要引入axios库 axios({ method: "post", url: "test.php", data: { userName: "xiefeng", psw: "123456" } }).then(res=>{ console.log(res.data); //axios自动包装在data属性中 }).catch(err=>{ console.error(err); })

能够解决回调地狱，由于其是基于XHR的第三方库，兼容性好