javascript - 如何确保我的程序停止，直到我的 axios 请求得到解决？

Question

我正在开发一个使用 React 作为前端的项目。当我创建一个项目时，我的意图是首先向我的服务器发送一个请求以创建该项目(仅使用文本表单数据)，然后为每个图像上传发送一个单独的请求。

// handles item creation
handleCreate = async (data) => {
    let id = await axios({
                            method: 'post',
                            url: <item_creation_URL>,
                            data: data
                        })
                        .then(res => {
                            return res.data();
                        })
                        .catch(err => {
                            this.handleErrors(err);
                        })
    return id;
}

// handles image uploads for a specific item
handleUpload = async (fd, itemId) => {
    let response = await axios({
                                 method: 'post',
                                 url: <img_upload_URL>,
                                 headers: {
                                     'content-type': 'multipart/form-data'
                                 },
                                 data: fd
                               })
                               .then(res => {
                                   return res;
                               })
                               .catch(err => {
                                   this.handleErrors(err.response.data);
                               });
    return response;
}

// prepares and sends the data to the server to create a new item
handleSubmit = event => {

    event.preventDefault();

    this.setState({ loading: true });

    // data needed to make an item on firebase
    const itemData = {
        name       : this.state.name,
        desc       : this.state.desc,
        cover      : this.state.coverImgIndex,
        visibleTo  : this.state.visibleTo,
        assignedTo : this.state.assignedTo,
        photos     : this.state.photos
    }

    // create a new item using the data
    let itemId = this.handleCreate(itemData);

    // upload the photos
    if (!this.state.errors){
        for (let i=0; i < this.state.uploadedFiles.length; i++) {
            let file = this.state.uploadedFiles[i];
            let fd = new FormData();
            fd.append('file', file, file.name);

            // send each file as its own upload request
            this.handleUpload(fd, itemId);

            if (this.state.errors) break;
        }
    }

    // submission was successful
    if (!this.state.errors){
        this.setState({ loading : false });
    }
}

我在网上做了一些研究，认为我可以通过将每个 axios 请求包装在一个带有 await 的 async block 中来达到预期的效果。 然而，执行似乎没有等待每个请求完成就在进行。

我对在 Javascript 中使用 Promise 还很陌生。我在这里做错了什么吗？

Answer 1

您使 handleCreate() 和 handleUpload() 函数异步。 因此，当您调用这些函数时，如果您应该在 axios 结束后继续，请使用 await。

像这样

// handles item creation
handleCreate = async data => {
  try {
    const res = await axios({
      method: "post",
      url: `<item_creation_URL>`,
      data: data
    });
    return res.data();
  } catch (err) {
    throw err;
  }
};

// handles image uploads for a specific item
handleUpload = async (fd, itemId) => {
  try {
    const res = await axios({
      method: "post",
      url: `<img_upload_URL>`,
      headers: {
        "content-type": "multipart/form-data"
      },
      data: fd
    });
    return res;
  } catch (err) {
    throw err.response.data;
  }
};

// prepares and sends the data to the server to create a new item
handleSubmit = event => {
  event.preventDefault();

  // data needed to make an item on firebase
  const { name, desc, cover, visibleTo, assignedTo, photos } = this.state;
  this.setState({ loading: true });
  this._asyncSubmit({ name, desc, cover, visibleTo, assignedTo, photos });
};

_asyncSubmit = async itemData => {
  try {
    // create a new item using the data
    const itemId = await this.handleCreate(itemData);
    for (let i = 0; i < this.state.uploadedFiles.length; i++) {
      const file = this.state.uploadedFiles[i];
      let fd = new FormData();
      fd.append("file", file, file.name);
      // send each file as its own upload request
      await this.handleUpload(fd, itemId);
    }
  } catch(err) {
    // you can handle errors here
    this.handleErrors(err);
  }
  this.setState({ loading: false });
};