Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/csharp-4.0/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何处理多个异步请求?_Javascript_Asynchronous - Fatal编程技术网

Javascript 如何处理多个异步请求?

Javascript 如何处理多个异步请求?,javascript,asynchronous,Javascript,Asynchronous,因此,在我的应用程序中,用户可以上传1到3张图片,当他点击保存按钮时,我将它们上传到firebase 这是我迄今为止的代码,我知道这是可怕的,我正在寻找一种方法,使其有效 if (img1) { uploadImage(img1, 'image/jpeg', 'imageOne', uuid) .then(() => { console.log('Image 1 was uploaded succesfully'); }).ca

因此,在我的应用程序中,用户可以上传1到3张图片,当他点击保存按钮时,我将它们上传到firebase

这是我迄今为止的代码,我知道这是可怕的,我正在寻找一种方法,使其有效

    if (img1) {
      uploadImage(img1, 'image/jpeg', 'imageOne', uuid)
      .then(() => {
        console.log('Image 1 was uploaded succesfully');

      }).catch(err => console.log(err));
    }

    if (img2) {
      uploadImage(img2, 'image/jpeg', 'imageTwo', uuid)
      .then(() => {
        console.log('Image 2 was uploaded succesfully');

      }).catch(err => console.log(err));
    }

    if (img3) {
      console.log('there is img3')
      uploadImage(img3, 'image/jpeg', 'imageThree', uuid)
      .then(() => {
        console.log('Image 3 was uploaded succesfully');

      }).catch(err => console.log(err));
    }
问题是,我想在上传完成后将用户重定向到主页。但是很难决定重定向代码应该放在哪里

我考虑过这样做嵌套if语句:

if (img1) {
      uploadImage(img1, 'image/jpeg', 'imageOne', uuid)
      .then(() => {
        console.log('Image 1 was uploaded succesfully');

        if (img2) {
          uploadImage(img2, 'image/jpeg', 'imageTwo', uuid)
          .then(() => {
            console.log('Image 2 was uploaded succesfully');

          }).catch(err => console.log(err));
        }


      }).catch(err => console.log(err));
    }

但是如果用户只上传了img2而不是img1呢?那么img2将永远不会被上传。如何改进代码?

您可以使用Promise.all

let promises = [];
if (img1) {
    promises.push(uploadImage(img1, 'image/jpeg', 'imageOne', uuid);
}
if (img2) {
    promises.push(uploadImage(img2, 'image/jpeg', 'imageTwo', uuid);
}

// etc...

Promise.all(promises).then(() => {console.log("All requests are done")})

查看Promise.all-Bluebird是一个很好的promises图书馆,尽管native现在也很酷

看起来像这样:

var p = [];

if (img1) p.push(uploadImg(img1...));
if (img2) p.push(uploadImg(img2...));
if (img3) p.push(uploadImg(img3...));

return Promise.all(p).then(function() {
    // redirection here
});

这里已经问了很多问题,请搜索异步javascript的归档文件,您将看到许多答案。简而言之,使用以下方法:请查看解决方案:Is PROMITE.all可能是JS本机的副本?没有图书馆@jdubjdub提到bluebirdJS.Promise.all是JS的原生版本。