使用 async/await 和 Promise.all() 对对象数组发出 api 请求

Question

我正在创建一个简单的图书搜索应用程序，我发出初始 api 请求以获取图书对象数组，然后我需要对每本书发出 api 请求以得到尺寸。当我 console.log 书的初始数组时，书对象添加了 attribute('height')，但我相信这是因为在我进行 api 调用后数组已更新。然后，当我 console.log 数组在我进行个人 api 调用后，我得到了一组承诺。最后，当我 Promise.all() 承诺数组时，它们都返回 undefined。我一直在玩 async/await 一段时间，如果您认为可以帮助我弄清楚如何 return 我的一系列具有“高度”属性的书籍，我将不胜感激我添加了个人 api 调用。

    
    searchBook = (event) => {
    event.preventDefault();
    axios
      .get(
        "https://www.googleapis.com/books/v1/volumes?q=" +
          this.state.searchField +
          "&key=" +
          this.state.apiKey
      )
      .then((data) => {
        //fill in missing attributes
        const cleanData = this.cleanData(data.data.items);

        //filter books for specific author
        const filterAuthor = this.filterAuthor(cleanData);

        //add height attribute to book
        const addHeight = this.addHeight(filterAuthor);

        console.log(filterAuthor); //returns array of book objects

        console.log(addHeight); //returns array of promises

        Promise.all(addHeight).then((data) => {
          console.log(data); //returns array of undefined
        });
        //this.setState({ books: addHeight }); 
      });
  };

  //add 'height' attribute to book objects
  addHeight = (data) => {
    const addHeight = data.map(async (book) => {
      await axios
        .get(
          "https://www.googleapis.com/books/v1/volumes/" +
            book.id +
            "?key=" +
            this.state.apiKey
        )
        .then((data) => {
          if (data.data.volumeInfo?.dimensions) {
            book["height"] =
              data.data.volumeInfo.dimensions.height.split(" ")[0] / 2.54; //convert cm to in
          } else {
            book["height"] = "0";
          }
          return book;
        });
    });
    return addHeight;
  };

Answer 1

TLDR

The way I see it, you need to return promise(I mean need to return axios

回答

我认为 promise 对象中没有 return 值。当你在 const addHeight = data.map(async (book)=> {...}) 处使用 async/await 时，这个回调不能 return 任何东西。所以当你 return axios 时，你的 promise 可以得到正确的数据

例子

 addHeight = (data) => {
    const addHeight = data.map((book) => {
     return axios
        .get(
          "https://www.googleapis.com/books/v1/volumes/" +
            book.id +
            "?key=" +
            this.state.apiKey
        )
        .then((data) => {
          if (data.data.volumeInfo?.dimensions) {
            book["height"] =
              data.data.volumeInfo.dimensions.height.split(" ")[0] / 2.54;
          } else {
            book["height"] = "0";
          }
          return book;
        });
    });
    return addHeight;
  };

使用 async/await 和 Promise.all() 对对象数组发出 api 请求

Making api requests on an array of objects using async/await and Promise.all()

javascript

reactjs

axios

google-books

google-books-api

TLDR

回答

例子