「 JS 」快速上手異步方案

問題:解決異步回調的深層嵌套的問題.(回調地獄)

1. Promise

promise對象用於表示一個異步操做的最終狀態,promise在回調代碼和將要執行這個任務的異步代碼之間提供了一種可靠的中間機制來管理回調。

//構造函數,回調函數是同步的回調
new Promise(function(resolve,reject){
    ....//異步操做
})

Promise的實例對象有三個狀態

•  pending: 初始狀態，既不是成功，也不是失敗狀態。
• fulfilled: 意味着操做成功完成。
• rejected: 意味着操做失敗

resolve和reject分別是兩個函數,當在回調中調用時,會改變promise實例的狀態,resolve改變狀態爲成功,reject爲失敗.

then

Promise.prototype.then()

當promise對象的狀態發生改變時，綁定在其身上的then方法就會被調用。
then方法包含兩個參數：onfulfilled函數 和 onrejected函數，它們都是 Function
類型。當Promise狀態爲fulfilled時，調用 then 的 onfulfilled 方法，當Promise狀態爲rejected時，調用 then 的 onrejected 方法， 因此在異步操做的完成和綁定處理方法之間不存在競爭,then() 方法返回一個 Promise對象.

返回值

then方法返回一個新的Promise，而它的行爲與then中的回調函數的返回值有關：

• 若是then中的回調函數返回一個值，那麼then返回的Promise將會成爲接受狀態，而且將返回的值做爲接受狀態的回調函數的參數值。
• 若是then中的回調函數拋出一個錯誤，那麼then返回的Promise將會成爲拒絕狀態，而且將拋出的錯誤做爲拒絕狀態的回調函數的參數值。
• 若是then中的回調函數返回一個已是接受狀態的Promise，那麼then返回的Promise也會成爲接受狀態，而且將那個Promise的接受狀態的回調函數的參數值做爲該被返回的Promise的接受狀態回調函數的參數值。
• 若是then中的回調函數返回一個已是拒絕狀態的Promise，那麼then返回的Promise也會成爲拒絕狀態，而且將那個Promise的拒絕狀態的回調函數的參數值做爲該被返回的Promise的拒絕狀態回調函數的參數值。
• 若是then中的回調函數返回一個未定狀態（pending）的Promise，那麼then返回Promise的狀態也是未定的，而且它的終態與那個Promise的終態相同；同時，它變爲終態時調用的回調函數參數與那個Promise變爲終態時的回調函數的參數是相同的。

catch

catch() 方法返回一個Promise，而且處理拒絕的狀況。

Promise.prototype.catch()

事實上,catch方法至關於then方法的第二個參數方法,觸發拒絕狀態.

注意,
若是調用 then的 Promise 的狀態（fulfillment 或 rejection）發生改變，可是 then 中並無關於這種狀態的回調函數，那麼 then 將建立一個沒有通過回調函數處理的新 Promise 對象，這個新 Promise 只是簡單地接受調用這個 then 的原 Promise 的終態做爲它的終態。因此在鏈式上,最終會執行到catch上.

//鏈式示例
new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("1");
resolve();
}, 1000);
}).then(function () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("2");
// resolve();
reject();
}, 1000);
});
}).then(function () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("3");
resolve();
}, 1000);
});
}).then(function () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("4");
resolve();
}, 1000);
});
}).catch(function(){
console.log("catch");
})

2. genarator

symbol

新的一種基礎數據類型symbol,表示獨一無二的值.
它一般做爲對象的屬性鍵,內置對象廣泛存在該值.

// 通常用法,它並非構造器,不能經過new,會報錯.
let sym = Symbol();

// 在對象中表現形式,要用[]包裹,否則會被認爲是string.
var obj = {
    [Symbol()]:"value";
}

該屬性是匿名,因此不可枚舉,只能經過.getOwnPropertySymbols()返回的數組.

// 想要得到兩個相同的Symbol,得經過.for()

Symbol("asd") === Symbol("asd") // false
Symbol.for("asd") === Symbol.for("asd")  // true

Iterator

迭代器,存在於特定幾種可枚舉的數據類型中.

// 通常用如下這種形式的鍵保存了迭代器函數.
// arr[Symbol.iterator]

aarr[Symbol.iterator]( ).next( )  //遍歷下一個,返回value和done,value表示值,done表示是否能夠繼續遍歷下一個.

//for...of循環遍歷就是基於此,必須該數據類型有迭代器.

回到generator

//表現形式
function* test(){
   
   yield 1; //任務1
   
   yield 2; //任務2
  
   yield 3;  //任務3
  
   yield 4 ; //任務4
}
//  調用該方法會返回一個含有迭代對象的對象.
var obj = text();
obj.next();   //調用該方法時,每次到一個yield處中止.

3. async/await

做用:

1. 簡化promise的使用編碼, 不經過then()/catch()來指定回調函數
2. 以同步編碼方式實現異步流程

async function test (){

    //  等待狀態改變,自動執行到下一個wait處
 var flag =  await  new Promise((resolve,reject)=>{
    
            setTimeout(function(){
            
            // 狀態改變
            resolve(data); //這裏面的值傳遞給flag
            },1000)
   })
   //經過flag傳遞數據
 flag =  await  new Promise((resolve,reject)=>{
    
            setTimeout(function(flag){
            
            // 狀態改變
            resolve(flag);
            },1000,flag)
   })
}

test().catch(function(err){
        //處理異常
});