如何将基于promise的函数转换为异步等待状态>>

Question

我正在使用promise提取数据并使用useState设置数据，如下所示。如何使用异步/等待代替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;

我正在使用promise提取数据，并使用useState设置数据，如下所示。那么如何使用async / await代替promise？ //应用导入React，{useState} from'react';导入...

Answer 1

您可以这样做

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 = useCallback(() => getSrc())

return <button onClick={onClick}></button>