個人博客遷移到biubu.cn,此處停更.請移步。
-
1. 異步編程的背景知識
- Javascript 引擎是基于單線程事件循環(huán)的概念構(gòu)建的,同一時刻只允許一個代碼塊在執(zhí)行。
- 那些代碼被放在一個任務隊列，每當一段代碼準備執(zhí)行時，都會被添加到任務隊列。每當javascript引擎中的一段代碼結(jié)束執(zhí)行，事件循環(huán)會執(zhí)行隊列中的下一個任務，任務隊列是javascript引擎中的一段程序，負責監(jiān)控代碼執(zhí)行并管理任務隊列。
- 隊列中的任務會從第一個一直執(zhí)行到最后一個。
-
1.1 JS引擎相關(guān)
- jS引擎的主線程負責執(zhí)行代碼，由于只有這一個線程，執(zhí)行當然是同步的，即按照順序來。另外，還有一個叫做任務隊列的東西，所有的異步代碼都是從隊列當中來。
JS引擎工作流程
- 在JS中，所謂的異步任務，有三種：
- 第一 鼠標鍵盤事件觸發(fā)，例如onclick、onkeydown等等
- 第二 網(wǎng)絡事件觸發(fā)，例如onload、onerror等等
- 第三 定時器，例如setTimeout、setInterval
2. Promise的基礎知識
2.1 Promise生命周期
graph TD
A[padding] --> B[Fulfilled]
A[padding] --> C[Rejected]
- 每個 Promise 都會經(jīng)歷一個生命周期,先是處于 進行中(pedding) 的狀態(tài),此時操作尚未完成,所以它也是 未處理(unsettled);一旦異步操作之行結(jié)束,Promise則變?yōu)?已處理(settled)的狀態(tài)。
操作結(jié)束后，Promise可能會進入到以下兩個狀態(tài)中的其中一個。- Fulfilled Promise 異步操作成功完成。
- Rejected 由于程序錯誤或一些其他原因，Promise 異步操作未能成功完成。
- 所有 Promise 都有 then() 方法,它接受兩個參數(shù):第一個是當Promise狀態(tài)變?yōu)閒ulfilled 時要調(diào)用的函數(shù),與異步相關(guān)的附加數(shù)據(jù)都會傳遞給這個完成函數(shù);第二個是當 Promise 的狀態(tài)變?yōu)?rejected 時要調(diào)用的函數(shù),所有失敗狀態(tài)相關(guān)的附加參數(shù)都會傳遞給這個拒絕函數(shù)。以下是用 Promise封裝的 ajax :
let ajaxPromise = (url, params) => {
// 判斷 params 是否存在
if(params) {
url = url + '?' + params;
}
return new Promise ((resolve, reject) => {
let ajax = null;
if(window.XMLHttpRequest) {
ajax = new XMLHttpRequest ();
}
else {
ajax = new ActiveXObject ('Microsoft.XMLHTTP ');
}
ajax.open ('GET', url);
ajax.send ();
ajax.onreadystatechange = () => {
if(ajax.readyState == 4 && ajax.status == 200) {
resolve (ajax.responseText);
}
};
// 如果 3秒內(nèi)請求未完成,則調(diào)用 失敗函數(shù)
setTimeout (() => {
reject ();
}, 3000);
});
};
let url = 'http://192.168.2.220:8080';
let params = 'name=wangjq&handsome=true';
ajaxPromise(url,params).then(result=>{
console.log (result.data);
},reason => {
console.log (reason.message);
})
