Promise,async,await筆記

Promise

創建promise對象

• Promise對象構造方法傳入一個帶有resolve和reject兩個參數的函數function

var promise = new Promise(function (resolve, reject) {
    //方法體內執行異步操作如:文件讀寫ajax之類
    setTimeout(function () {
        console.log('異步操作');
    }, 2000)
});

promise中resolve，reject

• Promise對象構造方法傳入的function中的resolve，reject參數是用來處理成功或失敗
• Promise對象總共有3中狀態：
  • pending: 初始狀態，不是成功或失敗狀態。
  • fulfilled: 意味著操作成功完成。（執行resolve狀態會變為fulfilled）
  • rejected: 意味著操作失敗。（執行reject狀態會變為rejected）

var promise = new Promise(function (resolve, reject) {
    //方法體內執行異步操作如:文件讀寫ajax之類
    setTimeout(function () {
        let success = true;
        if (success) {
            console.log('成功');
            resolve('成功');//fulfilled
        } else {
            console.log('失敗');
            reject('失敗');//rejected
        }
    }, 2000)
});

promise中then，catch

• Promise實例通過then接受成功（可以連點），catch接收失敗
• promise一次resolve執行會順序觸發promise實例下的所有then方法
• promise中reject,throw Erroe都會promise實例下的所有catch方法

var promise = new Promise(function (resolve, reject) {
    //方法體內執行異步操作如:文件讀寫ajax之類
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('執行成功');
        } else {
            reject('失敗');
        }
    }, 2000)
});
//promise實例接受成功和失敗
promise.then(function (data) {
    console.log(1);
    console.log(data);
}).then(function (data) {
    console.log(2);
    console.log(data);
}).catch(function (err) {
    console.log(err);
});
// 上述代碼會打印:
// 1
// 執行成功
// 2
// 執行成功

兩個promise依賴執行

• promise的then方法默認返回的是自身promise實例（從而實現then的連點）,當在then方法中添加return時,return就會根據return來變化

現有一個這樣的業務場景需要先調接口A獲取用戶信息,再根據接口A返回的數據調用接口B,兩個接口存在依賴

var promise1 = new Promise(function (resolve, reject) {
    //方法體內執行異步操作如:文件讀寫ajax之類
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('接口A');
        } else {
            reject('失敗');
        }
    }, 2000)
});
//promise實例接受成功和失敗
promise1.then(function (data) {
    console.log('接口A執行');
    console.log(data);
    var promise2 = new Promise(function (resolve, reject) {
        //方法體內執行異步操作如:文件讀寫ajax之類
        setTimeout(function () {
            let success = true;
            if (success) {
                resolve('接口B');
            } else {
                reject('失敗');
            }
        }, 1500)
    });
    return promise2;
}).then(function (data) {
    console.log('接口B執行');
    console.log(data);
}).catch(function (err) {
    console.log(err);
});
// 上述代碼會打印:
// 接口A執行
// 接口A
// 接口B執行
// 接口B

兩個promise順序執行

• promise的then方法默認返回的是自身promise實例（從而實現then的連點）,當在then方法中添加return時,return就會根據return來變化

現有一個這樣的業務場景需要先調接口A和接口B獲取數據,根據結果A返回數據取處理結果B返回的數據,兩個接口不存在依賴，但是存在順序

• 以下demo雖然接口B會比接口A早返回數據但是promise可以實現異步順序處理

var promise1 = new Promise(function (resolve, reject) {
    //方法體內執行異步操作如:文件讀寫ajax之類
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('接口A執行成功');
        } else {
            reject('失敗');
        }
    }, 2000)
});
var promise2 = new Promise(function (resolve, reject) {
    //方法體內執行異步操作如:文件讀寫ajax之類
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('接口B執行成功');
        } else {
            reject('失敗');
        }
    }, 1500)
});
//promise實例接受成功和失敗
promise1.then(function (data) {
    console.log(1);
    console.log(data);
    return promise2;
}).then(function (data) {
    console.log(2);
    console.log(data);
}).catch(function (err) {
    console.log(err);
});
// 上述代碼會打印:
// 1
// 接口A執行成功
// 2
// 接口B執行成功

Promise.all方法

• all方法是Promise類下的靜態方法,用于處理多個promise執行合并

現有一個這樣的業務場景渲染需要接口A和接口B數據，兩個接口不存在依賴，也不存在順序

var promise1 = new Promise(function (resolve, reject) {
    //方法體內執行異步操作如:文件讀寫ajax之類
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('promise1執行成功');
        } else {
            reject('失敗');
        }
    }, 1500)
});
var promise2 = new Promise(function (resolve, reject) {
    //方法體內執行異步操作如:文件讀寫ajax之類
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('promise2執行成功');
        } else {
            reject('失敗');
        }
    }, 2000)
});
Promise.all([promise1,promise2]).then(function (datas) {
    console.log(datas[0]);
    console.log(datas[1]);
}).catch(function (err) {
    console.log(err);
});
// 上述代碼會打印:
// promise1執行成功
// promise2執行成功

Promise.race方法

• race方法是Promise類下的靜態方法,用于處理多個promise競速

現有一個這樣的業務場景需要接口A或者接口B的數據，兩個接口不存在依賴，也不存在順序，誰先返回我就用誰的數據

var promise1 = new Promise(function (resolve, reject) {
    //方法體內執行異步操作如:文件讀寫ajax之類
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('promise1執行成功');
        } else {
            reject('失敗');
        }
    }, 1500)
});
var promise2 = new Promise(function (resolve, reject) {
    //方法體內執行異步操作如:文件讀寫ajax之類
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('promise2執行成功');
        } else {
            reject('失敗');
        }
    }, 2000)
});
Promise.race([promise1,promise2]).then(function (data) {
    console.log(data);
}).catch(function (err) {
    console.log(err);
});
// 上述代碼會打印:
// promise1執行成功

async/await

• async關鍵字申明的該方法是一個異步方法,申明方法中的await申明的promise對象都會轉換為同步
• await關鍵字阻塞promise對象使promise變為同步
• await只能在async關鍵字申明的異步方法中使用
• await等待的雖然是promise對象，但不必寫.then()，直接可以得到resolve的返回值。
• 捕獲錯誤用try catch

function asyncfun(time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            let success = true;
            if (success) {
                resolve('成功');
            } else {
                reject('失敗');
            }
        }, time);
    });
}
/**
 * 使用async，await
 */
let load = async function() {
    console.log('開始');
    try {
        //直接可以得到resolve的返回值。
        let succ = await asyncfun(2000);
        console.log('2000'+succ);
        let succ1 = await asyncfun(1500);
        console.log('1500'+succ1);
    } catch (err) {
        //直接可以得到reject的返回值。
        console.log(err);
    }
    console.log('結束');
};
load();