Useaxios ()
Это реактивный крючок, который упрощает асинхронизируемое и государственное управление. Исходный код и живой пример
Хотите предложить улучшение? Я весь во внимании! Пожалуйста, подать вопрос или открыть PR!
Применение
import React, { useState } from "react"; import { useAxios } from "./use-axios"; const App = () => { const [id, setId] = useState("1"); const axiosConfig = { method: "get", timeout: 2500 }; const { isLoading, isError, response } = useAxios( `https://pokeapi.co/api/v2/pokemon/${id}`, axiosConfig ); return ( {response?.data &&{data}} {isLoading &&} {isError && } ); };
Обзор
Useaxios
это Axios -Послеживать внедрение моего универсального useasyncfunc Реактивный крюк.
Одной из проблем для ASYNC операций является когда значение возврата больше не требуется. Например, пользователь покидает страницу (запрашивающий компонент не включен) или пользователь предоставляет новый поисковый запрос (старый ответ на поисковый запрос является лишним).
Вы можете увидеть ошибку, как это:
ПРЕДУПРЕЖДЕНИЕ. Невозможно выполнить обновление состояния реагирования на размонтированный компонент. Это NO-OP, но это указывает на утечку памяти в вашем приложении. Чтобы исправить, отменить все подписки и асинхронные задачи в функции очистки использования.
В этих ситуациях мы хотим отменить начальный запрос. Веб-API браузера предоставляет Abortcontroller
интерфейс ; Это объект контроллера, который позволяет прервать одну или несколько веб-запросов. Axios предоставляет аналогичные возможности с Отментикен сорт. Отменатокенов просты для реализации, если вы уже используете библиотеку AXIOS. Вы читаете немного больше о каждой реализации здесь Отказ
Useaxios.
/** * * @param {string} url - The url to call * @param {object} [config] - The axios config object; defaults to GET, etc * @returns {state} - { isLoading, isError, response } */ const useAxios = (url, config) => { // useReducer manages the local complex state of the async func hook's lifecycle. // See the source code for the full reducer! // NOTE: it is easy to modify or expand the reducer to fit your needs. const [state, dispatch] = useReducer(axiosReducer, { isLoading: false, isError: false }); useEffect(() => { // Declare Axios cancel token const source = CancelToken.source(); // Define the axios call const callAxios = async () => { // Begin with a clean state dispatch({ type: "AXIOS_INIT" }); try { // Straightforward axios call, // With cancel token inserted into config const response = await axios(url, { ...config, cancelToken: source.token }); dispatch({ type: "AXIOS_SUCCESS", payload: response }); } catch (err) { // Two options on error: // 1. If error is an axios cancel, simply return and move on // 2. For all other errors, assume async failure and dispatch failure action if (isCancel(err)) { console.log("Canceled request."); return; } dispatch({ type: "AXIOS_FAILURE" }); } }; // Invoke the defined axios call callAxios(); // On unmount, cancel the request return () => { source.cancel("Operation canceled."); }; // NOTE: here be dragon! // My instinct was include the axios config in this array, e.g. [url, config] // This causes an infinite re-render loop that I have not debugged yet :-/ }, [url]); return state; }; export default useAxios;
Заключение
Хорошо отменить лишние запросы, чтобы они не стали утечки памяти! Я надеюсь, что вы найдете этот пример полезным.
Оригинал: “https://dev.to/kwhitejr/useaxios-react-hook-for-any-axios-call-12b7”