如何将基于承诺的功能转换为异步等待？

Question

我正在使用 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;

Answer 1

你可以这样做

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

Answer 2

 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>

如何将基于承诺的功能转换为异步等待？

How to convert promise based function to async await?

async-await

reactjs

es6-promise