Как преобразовать функцию, основанную на обещаниях, в asyn c await? - PullRequest
Новая
       53

Как преобразовать функцию, основанную на обещаниях, в asyn c await?

1 голос
/ 03 мая 2020

Я выбираю данные с помощью promise и устанавливаю данные с помощью useState, как показано ниже. Как можно использовать async / await вместо promise then? 

    // App

    import React, { useState } from 'react';
    import fetchEmails from 'data/fetchEmails';

    const App = () => {
      const [date, setDate] = useState('');
      const [data, setData] = useState([]);

      return (
        <div>
          <div>
            <input
              value={date}
              onChange={setDate}}
            />
            <button onClick={() => fetchEmails(date, setData)}>Get data</button>
          </div>
          <div>
            {/* show data here, please ignore this part */}
            {data.map(d => <div>{d.text}</div>)}
          </div>
        </div>
      );
    };

    // fetchEmails

    const fetchEmails = (date, setData) => {
      fetch(
        `http://localhost:9000/?date=${date}`
      )
        .then((res) => res.json())
        .then((res) => setData(res))
        .catch((err) => console.log(err));
    };

    export default fetchEmails;

Ответы [ 2 ]

0 голосов
/ 03 мая 2020 
 const [src, setSrc] = useState(null);

  const getSrc = async () => {
    const response = await fetch(`https://aws.random.cat/meow`);

    const data = await response.json();

    setSrc(data.file);
  };

  const onClick = () => getSrc();

  return (
    <div>
      <img src={src} alt={src} />

      <button onClick={onClick}>click</button>
    </div>
  );

const onClick = useCallback(() => getSrc())

return <button onClick={onClick}></button>
0 голосов
/ 03 мая 2020

вы можете сделать так 

 const fetchEmails = async (date, setData) => {
  let res = await fetch(`http://localhost:9000/?date=${date}`);
  console.log(res);
  setData(res);
};
...