原生AJAX
// 1. 建立連線
var xhr = null;
xhr = new XMLHttpRequest()
// 2. 連線伺服器
xhr.open('get', url, true)
// 3. 傳送請求
xhr.send(null);
// 4. 接受請求
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
success(xhr.responseText);
} else { // fail
fail && fail(xhr.status);
}
}
}
複製程式碼-
優點：
通過非同步模式，提升了使用者體驗. 優化了瀏覽器和伺服器之間的傳輸，減少不必要的資料往返，減少了頻寬佔用.
Ajax在客戶端執行，承擔了一部分本來由伺服器承擔的工作，減少了大使用者量下的伺服器負載。
Ajax可以實現動態不重新整理（區域性重新整理）
-
缺點：
安全問題 AJAX暴露了與伺服器互動的細節。
對搜尋引擎的支援比較弱。
不容易除錯。
$.ajax
jQuery對Ajax的封裝
$.ajax({
dataType: 'json', // 設定返回值型別
contentType: 'application/json', // 設定引數型別
headers: {'Content-Type','application/json'},// 設定請求頭
xhrFields: { withCredentials: true }, // 跨域攜帶cookie
data: JSON.stringify({a: [{b:1, a:1}]}), // 傳遞引數
error:function(xhr,status){ // 錯誤處理
console.log(xhr,status);
},
success: function (data,status) { // 獲取結果
console.log(data,status);
}
})
複製程式碼$.ajax只接收一個引數，這個引數接收一系列配置
Axios
詳細可參考：www.jianshu.com/p/7a9fbcbb1…
axios基於Promise對原生的XHR進行了非常全面的封裝，使用方式也非常的優雅。另外，axios同樣提供了在node環境下的支援，可謂是網路請求的首選方案。支援所有現代瀏覽器，甚至包括 IE8+！
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
複製程式碼-
優點
同時支援 Node.js 和瀏覽器
支援 Promise API
可以配置或取消請求
可以設定響應超時
支援防止跨站點請求偽造（XSRF）攻擊
可以攔截未執行的請求或響應
支援顯示上傳進度
廣泛用於 React 和 Vue 專案
-
缺點 用起來比較麻煩
Superagent
改良版 Ajax——與 Node.js HTTP 客戶端搭配使用
Superagent 是一個基於 Promise 的輕量級漸進式 AJAX API，非常適合傳送 HTTP 請求以及接收伺服器響應。
與 Axios 相同，它既適用於 Node，也適用於所有現代瀏覽器。
用 Superagent 發起 HTTP 請求就像在 request 物件上呼叫方法一樣簡單：
var superagent = require('superagent');
superagent.post(`${prefix}/payplatform/pay/pay`).withCredentials().send(params).set({'appType': 5, 'blackbox' : blackbox}).then(response => {
let body = response.body;
if (body.errno === 0) {
return body.data;
} else {
return Promise.reject(body);
}
});
複製程式碼- 優點
它有一個外掛生態，通過構建外掛可以實現更多功能
可配置
HTTP 請求傳送介面友好
可以為請求鏈式新增方法
適用於瀏覽器和 Node
支援顯示上傳和下載進度
支援分塊傳輸編碼
支援舊風格的回撥
繁榮的外掛生態，支援眾多常見功能
- 缺點
其 API 不符合任何標準
Fetch
Fetch 是瀏覽器自帶的用於傳送請求的 API，旨在替代 XMLHttpRequest。
使用fetch，你不需要再額外載入一個外部資源。但它還沒有被瀏覽器完全支援，所以你仍然需要一個polyfill。
const options = {
method: "POST", // 請求引數
headers: { "Content-Type": "application/json"}, // 設定請求頭
body: JSON.stringify({name:'123'}), // 請求引數
credentials: "same-origin", // cookie設定
mode: "cors", // 跨域
}
fetch('http://www.xxx.com',options).then(function(response) {
return response.json();
}).then(function(myJson) {
console.log(myJson); // 響應資料
}).catch(function(err){
console.log(err); // 異常處理
})
複製程式碼-
優點
靈活易用
使用 Promise 避免回撥地獄
支援所有現代瀏覽器
遵循 request-response 方案
語法簡單清晰
支援 React Native
-
缺點
不支援伺服器端使用
缺乏開發庫的亮點功能，比如取消請求
沒有內建預設值，如請求模式，請求頭，請求憑據。
最後 用promise封裝http請求
function getJSON (url) {
return new Promise( (resolve, reject) => {
var xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
resolve(this.responseText, this)
} else {
var resJson = { code: this.status, response: this.response }
reject(resJson, this)
}
}
}
xhr.send()
})
}
function postJSON(url, data) {
return new Promise( (resolve, reject) => {
var xhr = new XMLHttpRequest()
xhr.open("POST", url, true)
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
resolve(JSON.parse(this.responseText), this)
} else {
var resJson = { code: this.status, response: this.response }
reject(resJson, this)
}
}
}
xhr.send(JSON.stringify(data))
})
}
複製程式碼getJSON('/api/v1/xxx').then( value => {
// dosomething
}).catch( error => {
// dosomething
})
複製程式碼