Рубрики
Без рубрики

Useaxios: React Hook для любых вызовов AXIOS

Useaxios () – это реактивный крючок, который упрощает асинхронизацию и управление государством. Исходный код и живут … Теги с реакцией, JavaScript, WebDev.

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”