如何在JavaScript Promise中獲取/演示異步行為

Question

我讀過

承諾還確保順序獨立。 將生產者和使用者分開，以便他們可以獨立執行，是異步編程的關鍵。 有了承諾，您可以先向消費者做出承諾，然后再向生產者提供解決方案。 然后，他們可以按照自己的時間表生產或消費，並且諾言同步。

為了理解上面描述的順序獨立性，我正在編寫一些代碼來希望證明這一點。 基本上，我想創建兩個異步partA() （基於在partA()和partB()中的兩個不同時間下載兩個映像），然后使用all解決這兩個問題。

var axios = require('axios');
function loadImage(imgsrc) {
    return axios.get(imgsrc);
}
function partA() {
    var promise1 = loadImage("http://cn.bing.com/s/a/hp_zh_cn.png");
    var promise2 = setTimeout(partB,20000);
    Promise.all([promise1, promise2]).then(function() {
    console.log("The images are loaded");
    });
};

function partB () {
    return loadImage("http://cn.bing.com/s/a/hpc20.png");
};

partA();

這是我的問題，問題是：

1. 在最后一行執行partA() ，由於var promise2 = setTimeout(partB,20000);我期望我必須等待20秒才能看到成功消息var promise2 = setTimeout(partB,20000); 行（我希望兩次下載間隔20秒，以供說明）。 也許我沒有正確使用setTimeout 。 但是無論如何，在babel- babel-node REPL中調用partA（）之后，幾乎立即獲得成功消息。 如何正確獲得延遲？

2. 在此示例中（如果正確），我如何按照produce or consume on their own schedule按produce or consume on their own schedule來解釋訂單獨立性？ 生產和消費地點在哪里？

（這是在Ubuntu 16.04下使用帶有--presets es2015 babel-node 6.24.1的）

Answer 1

問題是，setTimeout不返回Promise。 您必須插入一個對Promise.all執行超時的Promise。

function partA() {
     var promise1 = loadImage("http://cn.bing.com/s/a/hp_zh_cn.png");
     var promise2 = new Promise((resolve, reject) => {
         setTimeout(() => {
             return resolve(partB);
         }, 20000);
     });
     Promise.all([promise1, promise2]).then(function() {
         console.log("The images are loaded");
     });
 };

 function partB() {
     return loadImage("http://cn.bing.com/s/a/hpc20.png");
 };

 partA();

在這種情況下，promise2實際上是一個promise，在20秒后，它將以partB結果解析。

Answer 2

setTimeout不返回承諾。

要查看工作中的訂單獨立性，請考慮以下示例：

var promise1, promise2;
promise1 = loadImage("http://cn.bing.com/s/a/hp_zh_cn.png");
promise2 = loadImage("http://cn.bing.com/s/a/hpc20.png");
promise1.then(function () {
    console.log("promise1 finished");
});
promise2.then(function () {
    console.log("promise2 finished");
});
Promise.all([promise1, promise2]).then(function() {
    console.log("both finished");
});

該腳本的輸出可以是：

promise1 finished
promise2 finished
both finished

要么

promise2 finished
promise1 finished
both finished

這僅取決於哪個請求較早完成。 如果您想要一個更受控的示例，請考慮以下事項：

var promise1, promise2;
promise1 = create_timeout_promise(20);
promise2 = create_timeout_promise(10);

function create_timeout_promise(timeout) {
    var promise;
    promise = new Promise(function (resolve) {
        setTimeout(resolve, timeout);
    });
    return promise;
}

現在執行的輸出為：

promise2 finished
promise1 finished
both finished

因為承諾2將首先解決。