異步請求
背景：
異步請求，爲了優化用戶體驗，而誕生。
ajax
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7 , Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();- 界面用戶體驗改善，局部刷新
- 每次都需要重複寫XMLHttpRequest相關代碼
calback
function sum(a,b,cb){
const sum = a b;
if(cb && typeof cb === 'function'){
cb(sum)
}
}
sum(1,2,function(parm){
console.log(parm);
})- 依賴於之前業務邏輯，並非真正的異步，
var request = $.ajax({
url: "script.php",
method: "POST",
data: { id : menuId },
dataType: "html"
});
request.done(function( msg ) {
$( "#log" ).html( msg );
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " textStatus );
});- 進行了封裝，減少了XMLHttpRequest相關代碼
fetch
fetch("http://xxxx").then(res => {
console.log("fecth res....");
}).catch(error => {
console.log("fetch error");
})promise
new Promise().then(res => {
console.log("promise res....");
}).catch(error => {
console.log("promise error");
})- 代碼返回結果處理，拉平，編寫上體驗更好，
axios 增強版promise
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});//同時發出多個請求
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) {
// 兩個請求現在都執行完成
}));es6 async/await
async function getUserName(){
const userName = await queryUserName();
return userName;
}e6 yield
const getUser = function* getUserName(){
yield "zhangsan";
yield "xiaoming"
}- 多個請求之間，把異步代碼修改爲同步，等待
Rxjs
const foo = new Observable(subscriber => {
console.log('Hello');
subscriber.next(42);
});
foo.subscribe(x => {
console.log(x);
});