javascript - Promise 可以按顺序加载多个 url 吗？

Question

promise then return a specified promise给出以下代码片段:

function get(url) {
  return new Promise(function(resolve, reject) {
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      if (req.status == 200) {
        resolve(req.response);
      }
      else {
        reject(Error(req.statusText));
      }
    };
    req.onerror = function() {
      reject(Error("Network Error"));
    };
    req.send();
  });
}

这个函数可以如下使用:

get('story.json').then(function(response) {
  console.log("Success!", response);
}, function(error) {
  console.error("Failed!", error);
});

我想用promise加载多个url，比如

get('a.json').get('b.json')
// or get('a.json').then().get('b.json')

我已经用其他方式实现了它。但据我了解，Promise 无法完成这项工作。真的吗？

添加

事实上，我实现了一个类似的库来帮助在浏览器中执行动态脚本:

Loader = (function() {

  var load_cursor = 0;
  var load_queue;

  var loadFinished = function() {
    load_cursor ++;
    if (load_cursor < load_queue.length) {
      loadScript();
    }
  }

  function loadError (oError) {
    console.error("The script " + oError.target.src + " is not accessible.");
  }


  var loadScript = function() {
    var url = load_queue[load_cursor];
    var script = document.createElement('script');
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                loadFinished();
            }
        };
    } else {  //Others
        script.onload = function(){
            loadFinished();
        };
    }

    script.onerror = loadError;

    script.src = url+'?'+'time='+Date.parse(new Date());
    document.body.appendChild(script);
  };

  var loadMultiScript = function(url_array) {
    load_cursor = 0;
    load_queue = url_array;
    loadScript();
  }

  return {
    load: loadMultiScript,
  };

})();  // end Loader


// load...

Loader.load(['http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js', './my.js']);

Answer 1

使用普通的 Promise 语法

链式 promise

如果你希望它们是连续的，你可以链接你的 promise :

get('a.json').then(function(a) {
    return get('b.json');
}).then(function(b){
    return get('c.json');
}).then(function(c) {
    // all done here
}), function(err) {
    // error here
});

或者在 ES7 中，你可以像这样使用 async/await:

async function someFunction() {
    let a = await get('a.json');
    let b = await get('b.json');
    // do something with a and b here
    return something;
}

someFunction().then(result => {
    // all done here
}).catch(err => {
    // error here
});

并行运行 Promise

如果你想让它们并行加载，你可以使用Promise.all():

Promise.all([get('a.json'), get('b.json'), get('c.json')]).then(function(results) {
    // all done with results here
}, function(err) {
    // error here
});

使用 .reduce() 的序列

或者，如果您使用相同的代码来处理每个结果，您可以使用 reduce() 设计模式顺序加载它们:

['a.json', 'b.json', 'c.json'].reduce(function(p, item) {
    return p.then(function(){
        // process item here
    });
}, Promise.resolve()).then(function(result) {
    // all done here
}, function(err) {
    // error here
});

使用 Bluebird 的 .map() 的序列

或者，如果使用 Bluebird promise 库，它有 Promise.map()，这对于数组的并行操作非常有用

Promise.map(['a.json', 'b.json', 'c.json'], function(item) {
    // do some operation on item and return data or a promise
    return something;
}).then(function(results) {
    // all done
}, function(err) {
    // error here
});

---

使 get(x).get(y).get(z) 工作

扩展 promise

get(x).get(y).get(z) 使用 promises 的问题让我很感兴趣。我在这个工作片段中想到了一种方法来做到这一点:

function get(url) {
    function pget(u) {
        var p = this.then(function (result) {
            log(result);
            return get(u);
        });
        p.get = pget;
        return p;
    }
    var p = new Promise(function (resolve, reject) {
        setTimeout(function() {
            resolve(url);
        }, 500);
    });
    p.get = pget;
    return p;
}

get('a.json').get('b.json').get('c.json').then(function(result) {
    log(result);
    log("done");
}, function(err) {
    log("err");
});

function log(x) {
    var div = document.createElement("div");
    div.innerHTML = x;
    document.body.appendChild(div);
}

这有点hack。我认为标准机构正在研究一种更正式的方式来扩展这样的 promise ，这种 promise 将在比这更多的情况下起作用。但是，我在 Chrome、Firefox 和 IE 中使用 Bluebird 进行了尝试，这种特殊用法适用于所有这三种方法。这种方法的挑战在于每个 .then() 都会创建一个新的 promise ，并且默认情况下，它不会包含您的 .get() 方法。由于它的使用方式，我们在这里没有使用它，但您必须小心使用它的方式。

链接我们自己的对象

这里有一些不同的方法来执行 get(x).get(y).get(z) 语法。它最后需要一个空白的 .get() 来告诉您它想要停止链并访问最终的 promise 。这种方案的优点是它不会以任何方式干扰 promise 对象。

function delay(url) {
    return new Promise(function (resolve, reject) {
        setTimeout(function() {
            log(url);
            resolve(url);
        }, 500);
    });
}

function get(url) {
    
    function pget(u) {
        if (!u) {
            return this.promise;
        } else {
            return {promise: this.promise.then(function() {
                return delay(u);
            }), get: pget}
        }
    }
    
    return {promise: delay(url), get: pget};
}

// note the empty .get() right before the .then()
// the empty .get() at the end is required in this scheme
get('a.json').get('b.json').get('c.json').get().then(function(result) {
    log("done");
}, function(err) {
    log("err");
});


function log(x) {
    var div = document.createElement("div");
    div.innerHTML = x;
    document.body.appendChild(div);
}