Issue iterating through array and making an api get request with each iteration: getting status 429-CodePudding

I have a array of objects in a current react state, I want to iterate through each object in the array and grab an idea in order to make a request for each object and grab inforamtion from the api to complete the missing data in the object.

When i run the command, I am getting a 429 error that means to many request are being sent before they have time to process. I tried to use a timer but that did not work. I also tried to use useEffect but i was running into the same issue. I resorted to going back to original idea which was a for loop but it is breaking everything.

code:

  function buildCompleteProperties(){
    for(let i = 0; i < propertyList.length; i  ){
      propertyOptions['params'] = {zpid: propertyList[i]['zpid']}
      axios.request(propertyOptions).then(function (response) {
        console.log(response.data);
      }).catch(function (error) {
        console.error(error);
      });
    }
  }

At the end, it shows the first property details from the requests. here is waht the console looks like:

VM7363:1 GET https://zillow-com1.p.rapidapi.com/property?zpid=20471276 429 (Too Many Requests)
Error: Request failed with status code 429
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.onloadend (xhr.js:66)

VM7363:1 GET https://zillow-com1.p.rapidapi.com/property?zpid=20471276 429 (Too Many Requests)
Error: Request failed with status code 429
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.onloadend (xhr.js:66)

VM7363:1 GET https://zillow-com1.p.rapidapi.com/property?zpid=20471276 429 (Too Many Requests)
Error: Request failed with status code 429
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.onloadend (xhr.js:66)

VM7363:1 GET https://zillow-com1.p.rapidapi.com/property?zpid=20471276 429 (Too Many Requests)
Error: Request failed with status code 429
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.onloadend (xhr.js:66)

listingProvider: {…}, buildingPermits: null, propertyTaxRate: 0.77, contact_recipients: Array(1), solarPotential: {…}, …}
address:

CodePudding user response：

When the call is done, fire off the next one.

function makeRequests() {
  let i = 0;
  function next() {
    propertyOptions['params'] = {
      zpid: propertyList[i]['zpid']
    };
    axios.request(propertyOptions).then(function (response) {
      console.log(response.data);
      i  ;
      if (propertyList.length < i) next();
    });
  }
  next();
}

CodePudding user response：

The most straightforward approach would be to briefly pause after each call. You can achieve this by making your function asynchronous, and assigning axios.request() to a variable using await (rather than using the .then() syntax afterward). Set the sleep timer to whatever value is needed to stay within the API limitations.

Here is how I would refactor it:

 function sleep(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
    
 async function buildCompleteProperties(){
    for(let property of propertyList){
        propertyOptions.params = {
            zpid: property.zpid
        }  
        try {
          let { data } = await axios.request(propertyOptions);
          console.log(data)
          await sleep(1000)
        } catch (error){
            console.error(error);
        }    
    }
 }