在React中为JS承诺而苦苦挣扎

// 使用Promises
fetchData()
  .then(processData)
  .then(saveData)
  .catch(handleError);

// 使用async/await
async function handleAsyncTasks() {
  try {
    const data = await fetchData();
    const processedData = await processData(data);
    await saveData(processedData);
  } catch (error) {
    handleError(error);
  }
}

fetchData()
  .then(processData)
  .catch(handleError); // 确保有错误处理

// 或者在async函数中使用try/catch
async function handleAsyncTasks() {
  try {
    const data = await fetchData();
    const processedData = await processData(data);
  } catch (error) {
    handleError(error);
  }
}

Promise.all([fetchData1(), fetchData2()])
  .then(([data1, data2]) => {
    // 处理数据
  })
  .catch(handleError);

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

function DataFetcher() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      }
    }

    fetchData();
  }, []);

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetcher;