Ajax,Axios,Fetch的学习,对比和使用

Ajax：（async javascript and xml）

四步创建

function getRequest() {return new Promise((resolve, reject) => {// 1.const xhr = new XMLHttpRequest();/**2.xhr.open([http method], [url], [async], [userName], [userPass])http methods 有常用的请求方式有：post，get，delete，put，head，options，trace，connect。url：是想服务器请求的 api。async：代表异步，默认是 true 异步，false 是同步。userName、userPass：代表用户名和密码7 */xhr.open('GET', url, false);xhr.setRequestHeader("Content-Type", "application/json");xhr.onreadystatechange = function () {/**3.Ajax 状态一共有 5 种 xhr.readyState，分别是 0, 1, 2, 3, 4状态 0：unsent，刚创建的 XMLHttpRequest 实例，还没有发送。状态 1：（载入）已调用 send() 方法，正在发送请求。状态 2：（载入完成）send() 方法执行完成，已经接收到全部响应内容状态 3：loading（交互）正在解析响应内容状态 4：done 表示响应的主体内容解析完成，可以在客户端调用了 */if (xhr.readyState !== 4) return;if (xhr.status === 200 || xhr.status === 304) {resolve(xhr.responseText);} else {reject(new Error(xhr.responseText));}};// 4.xhr.send();});
}

缓存问题

设置请求头，在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,“0”) 或 anyAjaxObj.setRequestHeader(“Cache-Control”,“no-cache”)。
在 URL 后面加上一个随机数：“fresh=” + Math.random()。或在后面加上时间戳：“nowtTime=” + new Date().getTime()。
如果是使用 jQuery，直接这样就可以了
$.ajaxSetup({cache:false})。这样页面的所有 ajax 都会执行这条语句就是不需要保存缓存记录

Fetch

// get请求
const pro1 = fetch('https://xxx')
pro1.then( response => response.json()
).catch( err => {console.log(err)
})
// post请求
const URL =  'https://xxx'
const init = {method: 'POST',header: {"Content-type": "application/x-www-form-urlencoded; charset=UTF-8",},data: 'id=12&name=小新',credentials: 'include'
}
const pro2 = fetch(URL, init)
pro2.then( response => response.json()
).catch( err => {console.log(err)
})

返回promise对象 + 原生js: 不使用回调
三个模块：request对象,headers对象,response对象
数据流：通过数据流（Stream 对象）处理数据，对于请求大文件或者网速慢的场景相当有用
使用 fetch(url,optionObj)
optionObj:method,headers,data
credentials 表示是否可以携带 cookie，includes 表示是否同源都包含 cookie
异步，
post请求：跨域，先Options，204后发送真正请求
与ajax区别：
没有使用数据流，所有的请求都必须完成后才拿到

Axios:

axios.interceptors.request.use(function(config){return config;
},function(error){return Promise.reject(error);
});axios.interceptors.response.use(function(){return response;
},function(error){return Promise.reject(error);
})axios.get('api',{param:{}
}).then(res=>console.log(res));
axios.delete('apiURL', {params: {id: 1},timeout: 1000
})
axios.post('apiURL',{user: '小新',age: 18
}).then( res => {console.log(res);
})axios.put('apiURL', {name: '小新',
})axios.patch('apiURL', {id: 13,
},{timeout: 1000,
})// axios.all(Arr).then() => axios.all = function(arr){ return Promise.all(arr)}

promise封装的XmlHttpRequest的方法
原理
axios对象：通过createInstance创建
方法:调用Axios.prototype.request
生成axios.interceptors.request拦截器
拦截器的作用：在请求发送前进行一些而操作，比如加上token
响应拦截器 axios.interceptors.response
在接收到响应后进行一些操作
特点
是基于promise的http库，支持promise所有的API
拦截请求和响应
转换请求和响应数据，并将响应内容自动转换为JSON类型的数据
安全性更高，客户端支持防御XSRF
常用方法：get，post，put，patch，delete
配置： url,method,baseURL,transformRequest,headers,params,auth,proxy

Fetch VS Ajax VS Axios 区别

传统的 ajax 利用的是 XMLHttpRequest 这个对象，和后端进行交互。JQuery ajax 是对原生 XHR 的封装，多请求间有嵌套的话就会出现回调地狱的问题。
axios 使用 promise 封装 xhr，解决了回调地狱问题
fetch 是原生的 js，使用的是 promise，比ajax方便异步,没有回调地狱的问题