react.js：使用 axios 发出 2 个请求时为 429（请求过多）

Question

I am trying to learn React by making a motor cycle spec search web application.

I am making two axios requests in /api/index.js, and I am getting an error saying

'429 (Too Many Requests)'.

What am I doing wrong here?

/api/index.js

import axios from "axios";

const options1 = {
  method: 'GET',
  url: 'https://motorcycle-specs-database.p.rapidapi.com/model/make-name/Yamaha',
  headers: {
    'X-RapidAPI-Host': 'motorcycle-specs-database.p.rapidapi.com',
    'X-RapidAPI-Key': 'MyAPIKey'
  }
};
const options2 = {
    method: 'GET',
    url: 'https://motorcycle-specs-database.p.rapidapi.com/make',
    headers: {
      'X-RapidAPI-Host': 'motorcycle-specs-database.p.rapidapi.com',
      'X-RapidAPI-Key': 'MyAPIKey'
    }
  };
 
  export const makeList = async()=>{
    try{
        const {data} = await axios.request(options2);
        console.log('list of all makes is like this now', data);
        return data;
    }
    catch(error){

    }

  }
 
export const fetchData = async ()=>{
 try{
     const {data} = await axios.request(options1);
     return data;

 } 
 catch(error){

 }

}

and this is where I'm trying to use the data. App.js

import logo from './logo.svg';
import './App.css';
import {fetchData, makeList} from './api/index';
import React, {Component} from 'react';

class App extends React.Component{
  state = {

    data:[],
    makes:[],
  }

  async componentDidMount(){
    const fetchedData = await fetchData();
    const fetchedMakeList = await makeList();
    this.setState({data:fetchedData, makes:fetchedMakeList});
    //this.setState({makes:fetchedMakeList});
    console.log('list of all makes in componentDIDMOUNT is like ', fetchedMakeList);  
    //why is this undefined??
  }


render(){
 
  return (
    <div className="App">
      <header className="App-header">
      <h1>Some line-ups from YAMAHA</h1>
      {partOfTheArray.map(data=>{
       return <p>{data.name}</p> 
      })}
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Open React
        </a>
      </header>
    </div>
  );
}

}
  
export default App;

I am only requesting 2 requests, but I am getting this error message.

Answer 1

Assuming that you're trying to fetch data when component mounts, here is a better approach to do so:

// Import useState and useEffect
import React, {useState, useEffect} from 'react';

export default function SomeComponent() {
  let [data, setData] = useState(null)

  // use an useEffect with empty dependecy(empty [] as a dependecy) to fetch the data
  // empty [] makes sure that you're fetching data only once when the component mounts
  useEffect(() => {
    fetchData().then(res => {
        // check status for response and set data accordingly
        setData(res.data)
        // log the data
        console.log(res.data)
    })
  },[])

  return (
    <div className="App">
    </div>
  );
}

You need to update your fetchData() function as well.

export const fetchData = async ()=>{
 try{
     const response = await axios.request(options1);
     // return the whole response object instead of only the data.
     // this helps in error handling in the component
     return response;
 }
 catch(error){}
}

I hope it helps!