从另一个 API 数据获取 API URL id 无法正常工作

Question

In my small react Project, I needed to use an id from one api call in subsequent api calls. I have access to the data from the first call but do not know how to use it in the second call. I tried using a string literal to access all the ids so the URL can pick each ids directly from the other API but it was just returning random IDs.

Here is my code below

import React, { Component } from "react";
import axios from "axios";
export default class Cat extends Component {
   state = {
   imagedata: [],
   data: [],
   CatWeight: "",
   CatMetric: "",

     }
   
componentDidMount(){
   this.fetchCountryData();
   this.fetchImageUrl();
}     


  fetchCountryData = async () => {
    const url = "https://api.thecatapi.com/v1/breeds";
    try {
      const response = await axios.get(url);
      const data = await response.data;
     console.log(data)
      this.setState({
        data,
      });
    } catch (error) {
      console.log(error);
    }
  };


  fetchImageUrl = async () =>{
    
    // This is the Place I'm having issue with. The line below. where imgurl becomes https://api.thecatapi.com/v1/images/search?breed_id=char as an example
    // The id is coming from the First API id's
  const imgurl = `https://api.thecatapi.com/v1/images/search?breed_id=${this.state.data.map((item) => { return item.id })} ` 

 try {
    const response = await axios.get(imgurl);
    const imagedata = await response.data;
    console.log(imagedata)
    this.setState({
        imagedata,
    });
  } catch (error) {
    console.log(error);
  }
};

   
 render() {
   return (
     <div>
      {
            this.state.imagedata.map((item, id) =>{
            return <ul key={id}>{item.id}</ul>
            })
        
      }
      
     </div>
   )
 }
}

Answer 1

I do not know that specific api, but it looks like that endpoint would only take a single id. By using map, you are giving it an array of ids. You may need to make separate api calls for each id.

Answer 2

( Note : answer significantly updated in response to comment.)

There was a typo in your original. I don't know if that was only in StackOverflow or if it's also in the code that's failing for you. But the search URL looks like

https://api.thecatapi.com/v1/images/search?breed_ids=ebur

It's breed_ids , plural, not breed_id . Also, it only takes a single breed id, not a list of them, so you will need separate calls for each.

In the majority of cases (64/67), the image URL is already in the response, and there's no reason to fetch it again. So we can fetch it only for the few missing ones, and use Promise.all to combine them to handle the output. Here's one technique that doesn't try to use your React setup, but a simple innerHTML atop some text manipulation, and using the native fetch instead of axios :

 fetch('https://api.thecatapi.com/v1/breeds').then (resp => resp.json()).then (breeds => breeds.map ( breed => 'image' in breed && 'url' in breed.image? Promise.resolve ({name: breed.name, url: breed.image.url}): fetch (`https://api.thecatapi.com/v1/images/search?breed_ids=${breed.id}`).then (resp => resp.json ()).then (res => ({name: breed.name, url: res[0].url})) )).then (xs => Promise.all (xs)).then (breeds => breeds.map( breed => `<img src="${breed.url}" title="${breed.name}" width="100"/>` ).join ('')).then (pics => document.getElementById ('cats').innerHTML = pics).catch (err => console.log (`Error: ${err}`))

 <div id="cats"></div>

Because Promise.all accepts scalar values as well as Promises in its input array, we didn't have to wrap in Promise s those that were in the original document. Instead of

      ? Promise .resolve ({name: breed.name, url: breed.image.url})

we could have just written:

      ? {name: breed.name, url: breed.image.url}

and it would be slightly more performant. But I still prefer the version as written, just out of a desire for consistency.

Also, if you're working in an environment that supports the optional chaining operator (most but not yet all common environments), then this

    breed => 'image' in breed && 'url' in breed.image

might be better written as

    breed => breed?.image?.url

Update -- Breaking this down

A comment asked for a code breakdown. Here is an attempt:

fetch('https://api.thecatapi.com/v1/breeds')
  .then (resp => resp.json())

We start by fetching the data and turning the result into an object. I used the built-in fetch call rather than importing axios, but we could do something very similar with axios.

Note that we are using straight promises here, and not the async-await gloss on them. This could certainly be rewritten in an aysnc-await style, but, especially when I'm using Promise.all , I don't see much advantage.

  .then (breeds => breeds .map (

the result we get from the call is an array. We use Array.prototype.map on that array to turn an array of breeds into an array of something else, as seen in the next section:

    breed => 'image' in breed && 'url' in breed.image
      ? Promise .resolve ({name: breed.name, url: breed.image.url})
      : fetch (`https://api.thecatapi.com/v1/images/search?breed_ids=${breed.id}`)
          .then (resp => resp .json ())
          .then (res => ({name: breed.name, url: res[0].url}))
  ))

Here we test if the object already has the URL property we want. If it does, we return an already-resolved Promise for an object with name and url properties found in the breed object from the array. If it doesn't (and there are only a few of these in my test), we construct the image search url for the breed, call fetch on that, and when the resulting promise resolves, we turn this response into an object with resp.json () , and finally construct a name / url object from this.

In either branch of the conditional statement, we are returning a Promise. So the result of this is an array of Promises.

  .then (xs => Promise.all (xs))

We use Promise.all to convert an array of Promises for our name / url objects into a Promise for an array of name / url objects. This Promise will resolve when all the Promises we supplied have resolved, and it will return an array with the results of the calls. For instance, if we had this:

 Promise.all([ new Promise ((res, rej) => setTimeout(res, 2000, 'foo')), new Promise ((res, rej) => setTimeout(res, 3000, 'bar')), new Promise ((res, rej) => setTimeout(res, 1000, 'baz')), ])

it would resolve (in three seconds, when the final promise resolves) to the array ['foo', 'bar', 'baz'] . And if we added this:

 new Promise ((res, rej) => setTimeout(rej, 2000, 'qux')),

then it would reject (in two seconds, when the first promise is rejected) with the value 'qux' .

Promise.all is a real convenience. We now have a Promise that when everything succeeds, gives us an array of breeds.

  .then (breeds => breeds.map(
    breed => `<img src="${breed .url}" title="${breed .name}" width="100"/>`
  ).join (''))
  .then (pics => document .getElementById ('cats') .innerHTML = pics)

This just creates an HTML string and inserts it into the document. You would need to consult your React documentation to find the equivalent asynchronous processing with React. But it shouldn't be hard.

  .catch (err => console .log (`Error: ${err}`))

Finally, if there's an error and one of the Promises can't be resolved, the rejection reason will come here. You would presumably also handle this with a React technique.