useEffect和异步

useEffect中写async 多个await

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

const MyComponent = () => {
  // 用于存储第一个接口的返回值
  const [firstApiData, setFirstApiData] = useState(null);
  // 用于存储第二个接口的返回值
  const [secondApiData, setSecondApiData] = useState(null);
  // 用于跟踪加载状态
  const [isLoading, setIsLoading] = useState(true);
  // 用于跟踪错误状态
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchFirstApi = async () => {
      try {
        // 调用第一个接口
        const firstResponse = await axios.get('https://api.example.com/first-api');
        // 存储第一个接口的返回值
        setFirstApiData(firstResponse.data);

        // 根据第一个接口的返回值调用第二个接口
        const secondResponse = await axios.get(`https://api.example.com/second-api/${firstResponse.data.id}`);
        // 存储第二个接口的返回值
        setSecondApiData(secondResponse.data);
      } catch (err) {
        // 捕获并存储错误信息
        setError(err.message);
      } finally {
        // 无论请求成功还是失败，都将加载状态设置为 false
        setIsLoading(false);
      }
    };

    // 调用第一个接口的函数
    fetchFirstApi();
  }, []);

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

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

  return (
    <div>
      <h2>First API Data</h2>
      <pre>{JSON.stringify(firstApiData, null, 2)}</pre>
      <h2>Second API Data</h2>
      <pre>{JSON.stringify(secondApiData, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

一个异步

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

const AsyncEffectComponent = () => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const result = await response.json();
                setData(result);
            } catch (err) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, []);

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

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

    return (
        <div>
            <h2>Data from API</h2>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

export default AsyncEffectComponent;