如何正確的使用Promise

SwordFly 發布于2019-08-26 13:41 / 1494人閱讀

摘要：那如何使用進行異步回調如何捕獲錯誤聲明函數使用則返回使用則返回錯誤，并結束的繼續向下執行，并會跳到執行過了秒后接收到值返回值可以是數字，字串，對象或者是獲得上一個返回的值或返回的的返回值如用到，則會直接跳到此處

promise用法

對比傳統回調函數與Pormise的寫法

傳統回調函數

// 聲明函數
function run(callback) {
    let parmas = 0;
    if (callback) callback(parmas);
};
function fnStep1(callback) {
    let parmas = 123;
    if (callback) callback(parmas);
};
function fnStep2(callback) {
    let parmas = 456;
    if (callback) callback(parmas);
};
function fnStep3(callback) {
    let parmas = 789;
    if (callback) callback(parmas);
};
// fnStep4 ... 

// 傳統使用回調的寫法
run(function (parmas) {
    // parmas = 0
    console.log(parmas);
    fnStep1(function (parmas1) {
        // parmas = 123
        console.log(parmas1);
        fnStep2(function (parmas2) {
            // parmas = 456
            console.log(parmas2);
            fnStep3(function (parmas3) {
                // ...
                // 一直嵌套
            });
        });
    });
});

Promise的寫法

let p = new Promise((resolve, reject) => {
    // ?異步操作，最終調用:
    //
    const parmas = 0;
    resolve(parmas); // fulfilled
    // ?或
    //   reject("failure reason"); // rejected
})

p
    .then(
    (parmas) => {
        // parmas，resolve返回的值
        console.log(parmas);
        // 你的代碼塊 code...
        return 123; //返回值給下一個then
    }
    )
    .then(
    (parmas) => {
        // parmas，上一個then返回的值
        console.log(parmas);
        // 你的代碼塊 code...
        return 456; //返回值給下一個then
    }
    )
    .then(
    (parmas) => {
        // parmas，上一個then返回的值
        console.log(parmas);
        // 你的代碼塊 code...
        return 789; //返回值給下一個then
    }
    )

Promise異步回調

Promise要比傳統回調函數更簡潔直觀，可讀性更強。

那如何使用Promise進行異步回調? 如何捕獲錯誤？

// 聲明函數
function asyncFn(a) {

    return new Promise((resolve, reject) => {
        a += 1;
        setTimeout(function () {
            // 使用resolve則返回a
            resolve(a);
            // 使用reject則返回錯誤，并結束then的繼續向下執行，并會跳到catch
            // reject(new Error("fail"));
        }, 2000);
    });

}

// 執行
asyncFn(1).then(
    (a) => {
        // 過了2秒后接收到a值 => 2
        console.log(a);

        const newVal = 5;
        // const newVal = {a: 5};
        // const newVal = new Promise((resolve, reject) =>{});
        // 返回值可以是數字，字串，對象或者是 Promise
        return newVal;
    }
).then(
    (newVal) => {
        // newVal 獲得上一個then返回的值 或 返回的Promise的返回值

    }
).catch(
    (err)=>{
        // 如用到reject，則會直接跳到此處
        console.log(err)
    }
);

GPU云服務器云服務器 Promise使用如何正確學習javascript 如何正確購買阿里云服務器購買的域名如何使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109314.html

如何正確合理使用 JavaScript async/await ！

摘要：想閱讀更多優質文章請猛戳博客一年百來篇優質文章等著你引入的在的異步編程中是一個極好的改進。可能會產生誤導一些文章將與進行了比較，并聲稱它是下一代異步編程風格，對此作者深表異議。結論引入的關鍵字無疑是對異步編程的改進。 showImg(https://segmentfault.com/img/bVbjFP0?w=800&h=450); 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇...

trigkit4 2019-08-23 14:27 評論0 收藏0
Promise 的鏈式調用與中止

摘要：一是如何鏈式調用，二是如何中止鏈式調用。到目前為止，我們就基本了解了的用法及特點，并實現用重構用回調函數寫的異步操作。 Abstract 本文主要講的是如何實現 Promise 的鏈式調用。也就是 promise().then().then().catch() 的形式，然后討論如何在某一個 then() 里面中止 Promise。在程序中，只要返回了一個 promise 對象，如果 ...

cuieney 2019-08-20 12:33 評論0 收藏0
如何在 JS 循環中正確使用 async 與 await

摘要：蛤當你嘗試在循環中使用時，事情就會變得復雜一些。這意味著循環中的應該按順序執行。在循環中使用首先，使用對數組進行遍歷。在中使用如果在中使用始終返回數組，這是因為異步函數總是返回。在循環中使用當你使用時，希望篩選具有特定結果的數組。 async 與 await 的使用方式相對簡單。蛤當你嘗試在循環中使用await時，事情就會變得復雜一些。想閱讀更多優質文章請猛戳GitHub博客,一年...

liujs 2019-08-23 17:57 評論0 收藏0
讀懂 SOLID 的「依賴倒置」原則

這是理解SOLID原則中，關于依賴倒置原則如何幫助我們編寫低耦合和可測試代碼的第一篇文章。寫在前頭當我們在讀書，或者在和一些別的開發者聊天的時候，可能會談及或者聽到術語SOILD。在這些討論中，一些人會提及它的重要性，以及一個理想中的系統，應當包含它所包含的5條原則的特性。我們在每次的工作中，你可能沒有那么多時間思考關于架構這個比較大的概念，或者在有限的時間內或督促下，你也沒有辦法實踐一些好...

Snailclimb 2019-08-22 13:57 評論0 收藏0
詳解JavaScript的任務、微任務、隊列以及代碼執行順序

摘要：在微任務期間排隊的任何其他微任務都會被添加到隊列的末尾并進行處理。因此一個已的調用時將立即把一個微任務加入微任務隊列中。和回調被列為微任務。上述規則確保微任務不會中斷執行中期的。為了保證的可讀性，本文采用意譯而非直譯。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！思考下面 JavaScript 代碼： console.log(script start); ...

rubyshen 2019-08-26 10:20 評論0 收藏0