Promise,async,await筆記

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();
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Promise學習(上): 資料: JavaScript Promise迷你書 原著:azu / 翻譯:liubi...
    你隔壁的陌生人閱讀 579評論 0 1
  • 前言 本文旨在簡單講解一下javascript中的Promise對象的概念,特性與簡單的使用方法。并在文末會附上一...
    _暮雨清秋_閱讀 2,217評論 0 3
  • Promise 對象 Promise 的含義 Promise 是異步編程的一種解決方案,比傳統的解決方案——回調函...
    neromous閱讀 8,727評論 1 56
  • Promise的含義 Promise 是異步編程的一種解決方案,比傳統的解決方案——回調函數和事件——更合理和更強...
    YeLqgd閱讀 203評論 0 0
  • Promiese 簡單說就是一個容器,里面保存著某個未來才會結束的事件(通常是一個異步操作)的結果,語法上說,Pr...
    雨飛飛雨閱讀 3,373評論 0 19