Невозможно передать access_token в конечную точку в Reactjs

#reactjs #react-hooks #access-token #fetch-api

#reactjs #реагирующие перехваты #токен доступа #fetch-api

Вопрос:

Я пытаюсь извлечь данные из API, который требует access_token . Существует другой API для выборки access_token . Итак, я сначала пытаюсь получить acess_token, а затем передать его в API, который возвращает данные.

Я заметил, что API-интерфейс токена подвергается удару, но к моменту его передачи в API данных токен undefined

введите описание изображения здесь

Пожалуйста, предложите, как сначала получить access_token, а затем передать его в data_api.

Комментарии:

1. Не могли бы вы сказать мне, что вам нужна одинаковая логика для всех API или только для одного API, если вам нужно передать все API, чтобы вы могли создавать пользовательские хуки для вызова каждый раз перед вызовом API.

2. @sedhalsoni вы имеете в виду, что я должен писать отдельную выборку перед каждым вызовом api и разделять хуки?

3. Да, если вам нужно получать токен доступа каждый раз, или второй вариант — получить токен доступа на начальном уровне, установить его в локальном хранилище и передавать его при каждом вызове API.

4. @sedhalsoni Я попробовал ваш путь, теперь токен и api_headers печатаются в консоли, но получают 401 error , поэтому я зарегистрировался в response headers разделе Network , заметил это auth headers is not getting injected и, следовательно, получил 401unauthorized error . Вот код slack-files.com/T04MYU6C6-F01J7LJH6KA-7e54b04fa6 . Не могли бы вы предложить исправление для этого, поскольку это может быть последним шагом для получения конечного результата. Спасибо!

Ответ №1:

 const useFetch = (url,headers)=>{

    const [status, setStatus] = useState('idle');
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true)
    useEffect(() => {
        
        const fetchData = async () => {
            setStatus('fetching');
            const response = await fetch(
                url,headers
            );
            const data = await response.json();
            setData(data)
            setLoading(false)
            setStatus('fetched');
        };
    
        fetchData();
    }, [url,headers,setStatus,setData,setLoading]);
    return { data,loading }
}
 

Комментарии:

1. Эй, я опробовал этот код. но все равно токен отображается как неопределенный. Не уверен, где что-то не так: (

2. мой плохой, я думаю, я должен использовать status также право, чтобы проверить, простаивает он или нет?

3. можете ли вы, пожалуйста, помочь мне здесь, я немного смущен

4. Да, я пробовал только это, но получаю token как undefined

5. Вы дважды использовали useFetch. И api_headers не могут быть использованы, если первый ответ на useFetch еще не получен