如何在React js ES6中使用Promise.all

Question

我想要做的是将文件上传到服务器上，然后获取上传文件的 URL 并预览它。文件可以有多个。为此，我编写了以下代码：

 let filesURL=[];
 let promises=[];
 if(this.state.files_to_upload.length>0) {

    for(let i=0; i<this.state.files_to_upload.length; i++) {
        promises.push(this.uploadFilesOnServer(this.state.files_to_upload[i]))
    }

    Promise.all(promises).then(function(result){
        console.log(result);
        result.map((file)=>{
            filesURL.push(file);
        });
    });
    console.log(filesURL);
}
const uploadedFilesURL=filesURL;
console.log(uploadedFilesURL);

console.log(filesURL);给我返回的值Promise.all。
我只想在Promise.all正确完成时使用这些值。但是，我面临的问题是线路console.log(uploadedFilesURL);首先执行，而不考虑Promise.all并给我undefined价值。我认为我没有正确使用承诺，有人可以帮助我吗？
uploadFileOnServer代码是：

uploadFilesOnServer(file)
  {
    let files=[];
    let file_id='';

    const image=file;
    getImageUrl().then((response) => {
      const data = new FormData();
      data.append('file-0', image);
      const {upload_url}  = JSON.parse(response);
      console.log(upload_url);

      updateProfileImage(upload_url, data).then ((response2) => {
      const data2 = JSON.parse(response2);
      file_id=data2;
      console.log(file_id);
      files.push(file_id);
      console.log(files);
        });
    });
    return files;
  }

Answer 1

不，Promise 是异步的，因此它不会按照您想象的方式工作。如果您想在 Promise 完成后执行某些操作，则必须将其放入 Promise 的then回调中。这是基于您的代码的示例：

uploadFilesOnServer(file) {
  let files=[];
  let file_id='';

  const promise = getImageUrl()
  .then((imageUrlResponse) => {
    const data = new FormData();

    data.append('file-0', file);

    const { upload_url }  = JSON.parse(imageUrlResponse);

    console.log(upload_url);

    return updateProfileImage(upload_url, data);
  })
  .then ((updateImageResponse) => {
    file_id= JSON.parse(updateImageResponse);

    console.log(file_id);

    files.push(file_id);

    console.log(files);

    return files;
  });

  return promise;
}

let filesPromise = Promise.resolve([]);

if(this.state.files_to_upload.length > 0) {
  const promises = this.state.files_to_upload.map((file) => {
    return this.uploadFilesOnServer(file);
  });

  filesPromise = Promise.all(promises).then((results) => {
    console.log(results);

    return [].concat(...results);
  });
}

// This is the final console.log of you (console.log(uploadedFilesURL);)
filesPromise.then((filesUrl) => console.log(filesUrl));

《Understanding ECMAScript 6》（理解 ECMAScript 6 ）是一本关于 ES6 总体知识，尤其是 Promises 的好书，由Nicholas C. Zakas撰写

编辑：

下面是示例代码的简单解释：

1. uploadFilesOnServer 是一个函数，它接受一个文件，上传它，并在将来上传完成时以承诺的形式返回文件 URL。Promisethen在获取 url 时将调用其回调。

2. uploadFilesOnServer通过使用map函数，我们创建了一个url承诺列表，这是我们在列表中的每个文件上执行得到的结果。

3. 该Promise.all方法等待列表中的所有 Promise 完成，加入 url 结果列表并使用结果（即 url 列表）创建一个 Promise。我们需要这个，因为不能保证所有的 Promise 都会立即完成，并且为了方便起见，我们需要在一个回调中收集所有结果。

4. 我们从回调中获取 url then。