JavaScript：恪守我們的承諾-js教程-PHP中文網

JavaScript：恪守我們的承諾

JavaScript 透過其流行度和最近的改進，日益成為 Web 程式設計師最好的朋友。和所有最好的朋友一樣，JavaScript 信守承諾。

這聽起來可能有點奇怪，但這是事實。目前大多數瀏覽器都支援所謂的 Promise 物件。 Promise 很像一個函數，它代表您希望在未來某個時刻執行的一段程式碼或一項任務。

這是承諾的樣子。

var myPromise = new Promise(function (resolve, reject) {
    // Task to carry out goes here.
});

登入後複製

您可以在這裡看到，當我們建立一個 Promise 時，我們給它一個參數，這是一個包含我們希望在將來某個時刻執行的程式碼的函數。您可能還會注意到函數中傳遞給 Promise 的兩個參數： resolve 和 reject。這些也是函數，是我們告訴 Promise 是否完成了承諾的方式。這是您使用它們的方式：

var myPromise = new Promise(function (resolve, reject) {
    if (true) {
        resolve('Hello Tuts+ fans!');
    } else {
        reject('Aww, didn\'t work.');
    }
});

登入後複製

這個承諾顯然總是會被解決，因為 if 語句將永遠是為真。這只是出於學習目的 - 我們稍後會做一些更實際的事情 - 但想像一下用一段您不能 100% 確定是否有效的程式碼片段替換 true 。

現在我們已經創建了一個 Promise，我們該如何使用它？好吧，我們需要告訴它 resolve 和 reject 函數是什麼。我們透過使用 Promise 的 then 方法來做到這一點。

myPromise.then(function (result) {
    // Resolve callback.
    console.log(result); 
}, function (result) {
    // Reject callback.
    console.error(result);
});

登入後複製

因為我們的 if 語句總是透過其 true 檢查，所以上面的程式碼將始終記錄「Hello Tuts 球迷！」到控制台。它也會立即執行。這是因為 Promise 建構函數內的程式碼是同步的，這意味著它不會等待任何操作的執行。它擁有繼續進行所需的所有信息，並將盡快進行。

然而，Promise 真正發揮作用的地方是非同步任務，也就是您不知道 Promise 何時具體實現的任務。非同步任務的現實範例是透過 AJAX 取得資源，例如 JSON 檔案。我們不知道伺服器需要多長時間才能回應，甚至可能會失敗。讓我們在 Promise 程式碼中加入一些 AJAX。

var myPromise = new Promise(function (resolve, reject) {
    // Standard AJAX request setup and load.
    var request = new XMLHttpRequest();
    
    // Request a user's comment from our fake blog.
    request.open('GET', 'http://jsonplaceholder.typicode.com/posts/1');

    // Set function to call when resource is loaded.
    request.onload = function () {
        if (request.status === 200) {
            resolve(request.response);
        } else {
            reject('Page loaded, but status not OK.');
        }
    };

    // Set function to call when loading fails.
    request.onerror = function () {
        reject('Aww, didn\'t work at all.');
    }

    request.send();
});

登入後複製

這裡的程式碼只是用來執行 AJAX 請求的標準 JavaScript。我們請求一個資源，在本例中是指定 URL 處的 JSON 文件，並等待它回應。我們永遠不會知道確切的時間。我們顯然不想停止執行腳本來等待它，那我們該怎麼辦呢？

幸運的是，我們已將此程式碼放入 Promise 中。把它放在這裡，我們基本上是在說，「嘿，一段程式碼，我現在得走了，但我稍後會給你打電話，告訴你何時執行。保證你會這麼做並告訴我你什麼時候完成？」程式碼會說：「是的，當然。我保證。」

上面程式碼中需要注意的重要一點是 resolve 和 reject 函數的呼叫。請記住，這些是我們告訴我們的承諾我們的程式碼是否成功執行的方式。否則，我們永遠不會知道。

使用基本範例中的相同程式碼，我們可以看到 Promise 中的 AJAX 請求現在將如何運作。

// Tell our promise to execute its code
// and tell us when it's done.
myPromise.then(function (result) {
    // Prints received JSON to the console.
    console.log(result);
}, function (result) {
    // Prints "Aww didn't work" or
    // "Page loaded, but status not OK."
    console.error(result); 
});

登入後複製

我知道我們可以信任你，myPromise。

連結承諾

現在，您可能會認為 Promise 只是具有更好語法的奇特回呼函數。這在某種程度上是正確的，但為了繼續我們的 AJAX 範例，假設您需要再發出一些請求，每個請求都基於上一個請求的結果。或者如果您需要先處理 JSON 怎麼辦？

使用回調執行此操作將導致函數的大量嵌套，每個函數都變得越來越難以追蹤。幸運的是，在 Promise 的世界中，我們可以像這樣將這些函數連結在一起。以下是一個範例，一旦我們收到用戶在我們的假部落格上發表的評論的 JSON，我們就需要確保它全部是小寫，然後再對其進行其他操作。

myPromise
    .then(function (result) {
        // Once we receive JSON,
        // turn it into a JSON object and return.
        return JSON.parse(result);
    })
    .then(function (parsedJSON) {
        // Once json has been parsed,
        // get the email address and make it lowercase.
        return parsedJSON.email.toLowerCase();
    })
    .then(function (emailAddress) {
        // Once text has been made lowercase,
        // print it to the console.
        console.log(emailAddress);
    }, function (err) {
        // Something in the above chain went wrong?
        // Print reject output.
        console.error(err);
    });

登入後複製

您可以在此處看到，雖然我們的初始呼叫是非同步的，但也可以連結同步呼叫。 resolve 函數中的程式碼在 then 每個返回時都會被呼叫。您還會注意到，這裡只為整個鏈指定了一個誤差函數。透過將其作為最後一個 then 中的 reject 函數放在鏈的末尾，鏈中調用 reject 的任何 Promise 都會呼叫此函數一個。

现在我们对承诺更有信心了，让我们结合上面的承诺创建另一个承诺。我们将创建一个采用新的小写电子邮件地址的电子邮件地址，并（假装）向该地址发送电子邮件。这只是一个说明异步内容的示例 - 它可以是任何内容，例如联系服务器以查看电子邮件是否在白名单上或者用户是否已登录。我们需要将电子邮件地址提供给新的 Promise，但承诺不接受争论。解决这个问题的方法是将 Promise 包装在一个可以执行此操作的函数中，如下所示：

var sendEmail = function (emailAddress) {
    return new Promise(function (resolve, reject) {
        // Pretend to send an email
        // or do something else asynchronous
        setTimeout(function () {
            resolve('Email sent to ' + emailAddress);
        }, 3000);
    });
};

登入後複製

我们在此处使用 setTimeout 调用来简单地伪造一个需要几秒钟才能异步运行的任务。

那么我们如何使用新的承诺创建函数呢？好吧，由于在 then 中使用的每个 resolve 函数都应该返回一个函数，那么我们可以以与同步任务类似的方式使用它。

myPromise
    .then(function (result) {
        return JSON.parse(result);
    })
    .then(function (parsedJSON) {
        return parsedJSON.email.toLowerCase();
    })
    .then(function (emailAddress) {
        return sendEmail(emailAddress)
    })
    .then(function (result) {
        // Outputs "Email sent to stuart@fakemail.biz"
        console.log(result);
    }, function (err) {
        console.error(err);
    });

登入後複製

让我们回顾一下这个流程，总结一下发生了什么。我们最初的 Promise myPromise 请求一段 JSON。当收到该 JSON 时（我们不知道何时），我们将 JSON 转换为 JavaScript 对象并返回该值。

完成后，我们从 JSON 中取出电子邮件地址并将其变为小写。然后我们向该地址发送一封电子邮件，同样我们不知道它何时完成，但当它完成时，我们将向控制台输出一条成功消息。看不到沉重的嵌套。