react.js：使用 axios 發出 2 個請求時為 429（請求過多）

Question

我正在嘗試通過制作摩托車規格搜索 web 應用程序來學習 React。

我在 /api/index.js 中發出兩個 axios 請求，我收到一條錯誤消息

“429（請求過多）”。

我在這里做錯了什么？

/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){

 }

}

這就是我嘗試使用數據的地方。 應用程序.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;

我只請求 2 個請求，但收到此錯誤消息。

Answer 1

假設您嘗試在組件掛載時獲取數據，這是一種更好的方法：

// 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>
  );
}

您還需要更新您的fetchData() function。

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){}
}

我希望它有所幫助！