從原生的XHR到jquery ajax,再到現在的axios和fetch,究竟發生了哪些變化,我們接下來就來探討一下。
jquery ajax
它是對原生XHR的封裝,隨着vue、react框架的興起,很多情況下我們只需使用ajax可是卻要引入整個jquery,這是非常不合理。
$.ajax({
type:'POST',
url:url,
data:data,
dataType:dataType,
success:function(){},
error:funciton(){}
})
優點:響應快,使用方便。
缺點:
- 針對MVC的編程設計,不符合現在的MVVM趨勢
- 基於原生的XHR開發。
- JQuery較大,單純的使用ajax要引入這個文件不合理。
fetch
fetch解決了使用ajax引入這個jquery文件的問題。fetch號稱是ajax的替代品,它的API是基於Promise設計的。
//原生的XHR
var xhr=new XHRHttprequest();
xhr.open('GET',url);
xhr.onreadystatechange=funciton(){
if(xhr.readyState===4&&xhr.status===200){
console.log(xhr.responseText);
}
}
xhr.send()
//fetch
try {
let response = await fetch(url);//await後面是個promise對象
let data = await response.json();
console.log(data);
} catch(e) {
console.log("error:", e);
}
優勢:
- 更加底層,提供的API豐富。
- 脫離了XHR。
- 跨域處理(mode爲‘no-cors’)
- 基於promise實現,支持async/await
fetch('/testPost', {
method: 'post',
mode: 'no-cors',
data: {}
}).then(function() {});
缺點:
- fetch只有對網絡請求報錯,對400,500都當作成功的請求,並不會reject。
- fetch默認不會帶cookie,需要添加配置項:
fetch(url,{credentials:'include'})
- 所以 版本的IE均不支持原生Fetch。
- fetch不支持abort,不支持超時控制,使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺運行,造成了流量的浪費
Axios
Vue2.0之後,Axios受到了更多人的關注。Axios本質是對原生XHR封裝,需要一個promise對返回的結果進行處理。
- 支持Promise API
- 將返回的數據自動轉化成JSON數據====transformResponse
- 可以取消請求====request.abort()
- 提供一些併發請求的接口。
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
- 防止CSRF攻擊:每次請求都要帶一個從cookie中獲取的key值,根據同源策略,假冒的網站拿不到cookie中的key,後臺可以根據這個請求判斷是不是有人假冒,從而採取正確的策略。
axios({
methods:'post',
url:url,
data:data
}).then((resopnse)=>{
console.log(response)
}).catch((error)=>{
console.log(error)
})
Axios的原理解讀
底層還是對XHR
的封裝,只不過需要一個Promise
對象對返回的結果進行處理。axios
在瀏覽器端是和Ajax底層的原理一樣,都是通過XMLHttpRequest
對象進行的一次封裝。
NPM包流程:
- index.js入口文件:導出一個axios.js文件
- axios.js文件:導出了axois
module.exports=axios;
axios又是什麼?axios是向createInstance傳了一個defaultConfig參數的返回值。
//Axios/lib/axios.js
function createInstance(defaultConfig) {
var context = new Axios(defaultConfig);
...
return instance;
}
var axios = createInstance(defaults);
- defaults.js文件:參數是什麼?參數是一些header信息等一些默認值。
知識點:axios可以同時支持客戶端和服務端的請求。原理就是通過瀏覽器XHR和proess來區分請求。
/ 通過nodejs中的process和瀏覽器的XMLHttpRequest來區別當前在前端還是nodejs中
function getDefaultAdapter() {
var adapter;
if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
adapter = require('./adapters/http');//Nodejs端的Axios的實現:基於http或者https模塊來發起請求的
} else if (typeof XMLHttpRequest !== 'undefined') {
adapter = require('./adapters/xhr');//瀏覽器中axios的實現:對ajax庫的封裝,只不過暴露一個Promise出去
}
return adapter;
}
var defaults = {
adapter: getDefaultAdapter(),
...
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
validateStatus: function validateStatus(status) {
return status >= 200 && status < 300;
}
};
defaults.headers = {
common: {
'Accept': 'application/json, text/plain, */*'
}
};
- /lib/core/Axios.js:看看createInstance內部是什麼?就是將傳入的參數,掛載到自己的this上,新增了一個攔截器對象interceptors,這個對象裏有request和response屬性。這個屬性中的InterceptorManager這個構造函數又是幹嘛的?
- /lib/IntercetporManager.js:攔截器中的構造函數有三個方法。use、eject、forEach。
/ 進入core/InterceptorManager.js
InterceptorManager.prototype.use = function() {...}//使用攔截器
InterceptorManager.prototype.eject = function() {...}//刪除use過的內容
InterceptorManager.prototype.forEach = function forEach(fn) {...}//循環執行fn
目前爲止是createInstance函數執行返回的值就是axios的一些過程,給大家一個詳細的連接,博主寫的很好,我只是做些筆記。axios詳細解讀