React Hooks - Создание запроса Ajax - PullRequest
0 голосов
/ 30 октября 2018

Я только начал играть с перехватчиками React и мне интересно, как должен выглядеть запрос AJAX?

Я пробовал много попыток, но не могу заставить его работать, а также не знаю, как лучше всего это реализовать. Ниже моя последняя попытка:

import React, { useState, useEffect } from 'react';

const App = () => {
    const URL = 'http://api.com';
    const [data, setData] = useState({});

    useEffect(() => {
        const resp = fetch(URL).then(res => {
          console.log(res)
        });
    });

    return (
        <div>
          // display content here
        </div>
    )
}

Ответы [ 7 ]

0 голосов
/ 15 января 2019

Я нахожу много неправильных употреблений useEffect в ответах выше.

Асинхронная функция не должна передаваться в useEffect.

Посмотрим подпись useEffect:

useEffect(didUpdate, inputs);

Вы можете создавать побочные эффекты в функции didUpdate и возвращать функцию удаления. Функция dispose очень важна, ее можно использовать для отмены запроса, сброса таймера и т. Д.

Любая асинхронная функция будет возвращать обещание, но не функцию, поэтому функция dispose фактически не имеет эффекта.

Так что передача в асинхронной функции абсолютно может справиться с вашими побочными эффектами, но это анти-паттерн Hooks API.

0 голосов
/ 07 февраля 2019

Я бы порекомендовал вам использовать response-request-hook , так как он охватывает множество вариантов использования (одновременный множественный запрос, отменяемые запросы на отключение и состояния управляемого запроса). Он написан на машинописном шрифте, так что вы можете воспользоваться этим, если ваш проект также использует машинописный текст, а если нет, в зависимости от вашей IDE вы можете увидеть подсказки типов, а библиотека также предоставляет несколько помощников, позволяющих вам безопасно введите полезную нагрузку, ожидаемую в результате запроса.

Он хорошо протестирован (покрытие кода 100%), и вы можете использовать его просто так:

function UserProfile(props) {
  const [user, getUser] = useResource((id) => {
    url: `/user/${id}`,
    method: 'GET'
  })

  useEffect(() => getUser(props.userId), []);

  if (user.isLoading) return <Spinner />;
  return (
    <User 
      name={user.data.name}
      age={user.data.age}
      email={user.data.email}
    >  
  )
}

пример изображения

Отказ от ответственности автора: мы использовали эту реализацию в производстве. Есть куча ловушек, чтобы иметь дело с обещаниями, но есть также крайние случаи, которые не охвачены или недостаточно реализованы. реакции-запрос-крюк проверен в бою еще до его официального выпуска. Его главная цель - быть хорошо протестированными и безопасными в использовании, поскольку мы имеем дело с одним из наиболее важных аспектов наших приложений.

0 голосов
/ 11 ноября 2018

Традиционно вы пишете вызов Ajax в жизненном цикле componentDidMount компонентов класса и используете setState для отображения возвращенных данных, когда запрос возвращен.

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

Вот пример, который выбирает случайный профиль пользователя из API и отображает имя.

function AjaxExample() {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => {
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUser(data.results[0]);
      });
  }, []); // Pass empty array to only run once on mount.
  
  return <div>
    {user ? user.name.first : 'Loading...'}
  </div>;
}

ReactDOM.render(<AjaxExample/>, document.getElementById('app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>
0 голосов
/ 08 ноября 2018

Вот кое-что, что я думаю, будет работать:

import React, { useState, useEffect } from 'react';

const App = () => {
    const URL = 'http://api.com';
    const [data, setData] = useState({})

    useEffect(async () => {
      const resp = await fetch(URL);
      const data = await resp.json();

      setData(data);
    }, []);

    return (
      <div>
        { data.something ? data.something : 'still loading' }
      </div>
    )
}

Есть пара важных битов:

  • Функция, которую вы передаете useEffect, действует как componentDidMount, что означает, что она может выполняться много раз. Вот почему мы добавляем пустой массив в качестве второго аргумента, что означает «Этот эффект не имеет зависимостей, поэтому запустите его только один раз».
  • Ваш App компонент по-прежнему отображает что-то, даже если данные еще не здесь. Таким образом, вы должны обработать случай, когда данные не загружены, но компонент отображается. Между прочим, в этом нет никаких изменений. Мы делаем это даже сейчас.
0 голосов
/ 31 октября 2018

Хороших ответов пока нет, но я добавлю пользовательский хук, когда вы хотите инициировать запрос, потому что вы тоже можете это сделать.

function useTriggerableEndpoint(fn) {
  const [res, setRes] = useState({ data: null, error: null, loading: null });
  const [req, setReq] = useState();

  useEffect(
    async () => {
      if (!req) return;
      try {
        setRes({ data: null, error: null, loading: true });
        const { data } = await axios(req);
        setRes({ data, error: null, loading: false });
      } catch (error) {
        setRes({ data: null, error, loading: false });
      }
    },
    [req]
  );

  return [res, (...args) => setReq(fn(...args))];
}

Вы можете создать функцию, используя эту ловушку для конкретного метода API, например, если хотите, но помните, что эта абстракция не является строго обязательной и может быть довольно опасной (свободная функция с ловушкой не является хорошей идеей если он используется вне контекста функции компонента React).

const todosApi = "https://jsonplaceholder.typicode.com/todos";

function postTodoEndpoint() {
  return useTriggerableEndpoint(data => ({
    url: todosApi,
    method: "POST",
    data
  }));
}

Наконец, из вашего функционального компонента

const [newTodo, postNewTodo] = postTodoEndpoint();

function createTodo(title, body, userId) {
  postNewTodo({
    title,
    body,
    userId
  });
}

А затем просто укажите createTodo на обработчик onSubmit или onClick. newTodo будет иметь ваши данные, статусы загрузки и ошибок. Код песочницы прямо здесь.

0 голосов
/ 30 октября 2018

Работает просто отлично ... Вот, пожалуйста:

РЕДАКТИРОВАТЬ: обновляется в зависимости от изменения версии (спасибо @mgol за то, что вы мое внимание в комментариях ...

import React, { useState, useEffect } from 'react';

const useFetch = url => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  const fetchUser = async () => {
    const response = await fetch(url);
    const data = await response.json();
    const [user] = data.results;
    setData(user);
    setLoading(false);
  };

  useEffect(() => {
    fetchUser();
  }, []);

  return { data, loading };
};

const App = () => {
  const { data, loading } = useFetch('https://api.randomuser.me/');

  return (
    <div className="App">
      {loading ? (
        <div>Loading...</div>
      ) : (
        <React.Fragment>
          <div className="name">
            {data.name.first} {data.name.last}
          </div>
          <img className="cropper" src={data.picture.large} alt="avatar" />
        </React.Fragment>
      )}
    </div>
  );
};

Демо:

Edit x908rkw8yq

0 голосов
/ 30 октября 2018

Вы можете создать пользовательский хук с именем useFetch, который будет реализовывать хук useEffect.

Передача пустого массива в качестве второго аргумента в хук useEffect вызовет запрос на componentDidMount.

Вот демонстрационная программа в песочнице кода .

См. Код ниже.

import React, { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, updateData] = useState(undefined);

  // empty array as second argument equivalent to componentDidMount
  useEffect(() => {
     fetch(url).then(res => {
        return res.json();
      }).then(json => {
        updateData(json);
     });
  }, []);

  return data;
};

const App = () => {
    const URL = 'http://www.example.json';
    const result = useFetch(URL);

    return (
      <div>
        {JSON.stringify(result)}
      </div>
    );
}
...