一、Promise
Promise主要用於解決異步回調嵌套的問題。
當多個ajax請求之間存在依賴關係,也就是說一個請求必須使用另一個請求返回的結果時,需要將這個請求嵌套在另一個請求的回調函數上,才能使用另一個請求的結果來發送這個請求。
Promise的思路是將異步請求作爲一個對象,將執行成功和失敗作爲這個對象的方法,執行成功的時候將結果放到這個對象的then方法中處理後續的邏輯,失敗調用catch方法。這樣調用它就避免了回調函數的嵌套。
使用場景: 主要用於保證多個異步請求都完成以後,再進行後續的業務。
resolve成功狀態
reject拒絕狀態
then是前面返回promise的處理
Promise的相關概念
es6新語法 用來處理異步編程
promise是一個對象 可以獲取異步操作的消息
可以避免多層異步調用嵌套的問題(回調地獄)
提供了簡潔的API 使得控制異步操作更加容易
基於promise發送ajax請求
Promise常用的API
1.實例方法
.then() 得到異步任務的正確結果
.catch() 得到異常信息
.finally() 成功與否都會執行
2.對象方法
Promise.all() 併發處理多個異步任務 所有任務都執行完成才能得到結果
Promise.race() 併發處理多個異步任務 只要有一個任務完成就能得到結果
原文鏈接:https://blog.csdn.net/weixin_43883485/article/details/105142491
二、ajax,fetch,axios優缺點
axios是通過promise實現對ajax技術的一種封裝,就像jQuery實現ajax封裝一樣。
簡單來說: ajax技術實現了網頁的局部數據刷新,axios實現了對ajax的封裝。
axios是ajax ajax不止axios。
1.ajax優缺點
1.本身是針對MVC的編程,不符合現在前端MVVM的浪潮。
2.基於原生的XHR開發,XHR本身的架構不清晰,已經有了fetch的替代方案。
3.JQuery整個項目太大,單純使用ajax卻要引入整個JQuery非常的不合理。
4.不支持back,安全性不高,暴露了與服務端交互的細節。
5.對瀏覽器的搜索引擎較弱,不會執行js代碼,爬蟲爬不到,跨域請求有一定的限制。
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function() {},
error: function() {}})
2.axios優缺點
1.從node.js發出http請求,支持promise API發送請求和攔截響應。
2.自動轉換JSON數據,防止CSRF/XSRF攻擊。
3.提供了一些併發請求的接口。
axios({
url: '/getUsers',
method: 'get',
responseType: 'json', // 默認的
data: {
//'a': 1,
//'b': 2,
}
}).then(function (response) {
console.log(response);
console.log(response.data);
}).catch(function (error) {
console.log(error);
})
3.fetch優缺點
符合關注分離,沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個對象裏。
更好更方便的寫法,更加底層,提供的API豐富(request, response)。
脫離了XHR,是ES規範裏新的實現方式。
1)fetchtch只對網絡請求報錯,對400,500都當做成功的請求,需要封裝去處理。
2)fetch默認不會帶cookie,需要添加配置項。
3)fetch不支持abort,不支持超時控制,使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺運行,造成了量的浪費。
4)fetch沒有辦法原生監測請求的進度,而XHR可以。
// 原生XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText) // 從服務器獲取數據
}
}
xhr.send()
// fetch
fetch(url).then(response = > {
if (response.ok) {
response.json()
}
}).then(data = > console.log(data)).
catch (err = > console.log(err))
原文鏈接:https://blog.csdn.net/mei0515/article/details/94570251