javascript - How to fixed 429 (Too Many Requests)? - Stack Overflow

admin管理员组

文章数量:1278981

I am creating a custom hook in React for fetching jobs from GitHub jobs API. But CORS creating problems.So I also use const BASE_URL = '://jobs.github/positions.json'; This throwing error 429 (Too Many Requests). I do not use any backend. This hook will be called once from app.js while loading application.

useFetchJobs.js

import { useReducer, useEffect } from 'react';
import axios from 'axios';

const ACTIONS = {
    MAKE_REQUEST: 'make-request',
    GET_DATA: 'get-data',
    ERROR: 'error'
}

const BASE_URL = '.json';

function reducer(state, action) {
    switch (action.type) {
        case ACTIONS.MAKE_REQUEST:
            return { jobs: [], loading: true }
        case ACTIONS.GET_DATA:
            return { ...state, jobs: action.payload.jobs, loading: false }
        case ACTIONS.ERROR:
            return { ...state, jobs: [], loading: false , error: action.payload.error }
        default:
            return state;
    }
}

export default function useFetchJobs(params, page) {
    const [state, dispatch] = useReducer(reducer, { jobs: [], loading: true });

    useEffect(() => {
        dispatch({ type: ACTIONS.MAKE_REQUEST });
        axios.get(BASE_URL, {
            params: { markdown: true, page: page, ...params }
        }).then(res => {
            dispatch({ type: ACTIONS.GET_DATA, payload: { jobs: res.data }});
        }).catch(e => {
            dispatch({ type: ACTIONS.ERROR, payload: { error: e }});
        })
    }, [params, page]);

    return state;
};

App.js

import React from 'react';

import useFetchJobs from "./useFetchJobs";

import Container from "react-bootstrap/Container";

const App = () => {
  const { jobs, loading, error } = useFetchJobs();
  return (
    <Container>
      {loading && <h1>Loading...</h1>}
      {error && <h1>Error. Please try again...</h1>}
      <h1>{jobs.length}</h1>
    </Container>
  );
}

export default App;

I am creating a custom hook in React for fetching jobs from GitHub jobs API. But CORS creating problems.So I also use const BASE_URL = 'https://cors-anywhere.herokuapp./https://jobs.github./positions.json'; This throwing error 429 (Too Many Requests). I do not use any backend. This hook will be called once from app.js while loading application.

useFetchJobs.js

import { useReducer, useEffect } from 'react';
import axios from 'axios';

const ACTIONS = {
    MAKE_REQUEST: 'make-request',
    GET_DATA: 'get-data',
    ERROR: 'error'
}

const BASE_URL = 'https://jobs.github./positions.json';

function reducer(state, action) {
    switch (action.type) {
        case ACTIONS.MAKE_REQUEST:
            return { jobs: [], loading: true }
        case ACTIONS.GET_DATA:
            return { ...state, jobs: action.payload.jobs, loading: false }
        case ACTIONS.ERROR:
            return { ...state, jobs: [], loading: false , error: action.payload.error }
        default:
            return state;
    }
}

export default function useFetchJobs(params, page) {
    const [state, dispatch] = useReducer(reducer, { jobs: [], loading: true });

    useEffect(() => {
        dispatch({ type: ACTIONS.MAKE_REQUEST });
        axios.get(BASE_URL, {
            params: { markdown: true, page: page, ...params }
        }).then(res => {
            dispatch({ type: ACTIONS.GET_DATA, payload: { jobs: res.data }});
        }).catch(e => {
            dispatch({ type: ACTIONS.ERROR, payload: { error: e }});
        })
    }, [params, page]);

    return state;
};

App.js

import React from 'react';

import useFetchJobs from "./useFetchJobs";

import Container from "react-bootstrap/Container";

const App = () => {
  const { jobs, loading, error } = useFetchJobs();
  return (
    <Container>
      {loading && <h1>Loading...</h1>}
      {error && <h1>Error. Please try again...</h1>}
      <h1>{jobs.length}</h1>
    </Container>
  );
}

export default App;

• javascript
• reactjs
• http
• axios
• http-status-code-429

Share Improve this question Follow edited Aug 5, 2020 at 16:40 MD Jahid Hasan asked Jul 21, 2020 at 8:06 MD Jahid HasanMD Jahid Hasan 1,11333 gold badges1313 silver badges2222 bronze badges 5

• 1 Does this answer your question? React - Axios call make too many requests – StefanN Commented Jul 21, 2020 at 8:07
• No, after passing empty array getting 429 (Too Many Requests) – MD Jahid Hasan Commented Jul 21, 2020 at 8:14
• Probably the params or page is changing every time when rendering takes place which make the useEffect methods to run again and it is causing a infinite loop. – Deep Kumar Singh Commented Jul 21, 2020 at 8:14
• If I pass empty params or page also this happed error 429 – MD Jahid Hasan Commented Jul 21, 2020 at 8:23
• It seems like your UseEffect is "listening" to the params and page states. Try listening to setParams and setPage instead, if you use those. It's much easier to control when these are called as opposed to pure state – fesieg Commented Jul 21, 2020 at 8:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

It is maybe problem of cors-anywhere.herokuapp. and not your application.

I have done the same tutorial that your code is based on and I fixed it by using local-cors-proxy. Just follow their documentation and you should be good to go.

Using https://api.allorigins.win/raw?url= worked for me as well, but somehow it broke ReactMarkdown, so the job detail's markdown was not parsed anymore for some reason.

Many people are using cors-anywhere, which is probably why it sends Too many requests all the time. I guess its better to rely on an own proxy in this case.

Using https://api.allorigins.win/raw?url= before the url fixes the issue. Cors anywhere seem to have a problem. Here is the documentation: https://allorigins.win/

本文标签： javascriptHow to fixed 429 (Too Many Requests)Stack Overflow