react如何使用await

在 React 中使用 await

在 React 中，await 通常用于处理异步操作，例如数据获取、API 调用或其他需要等待的任务。以下是几种常见的使用场景和方法。

在 useEffect 中使用 await

useEffect 是 React 中处理副作用的钩子，可以在其中使用异步函数。由于 useEffect 的回调函数不能直接使用 async，需要定义一个异步函数并在内部调用。

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

function MyComponent() {
  const [data, setData] = useState(null);

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

    fetchData();
  }, []);

  return <div>{data ? data.message : 'Loading...'}</div>;
}

在事件处理函数中使用 await

事件处理函数可以直接定义为 async，以便使用 await。

import React, { useState } from 'react';

function MyButton() {
  const [loading, setLoading] = useState(false);

  const handleClick = async () => {
    setLoading(true);
    const response = await fetch('https://api.example.com/submit');
    const result = await response.json();
    setLoading(false);
    console.log(result);
  };

  return (
    <button onClick={handleClick} disabled={loading}>
      {loading ? 'Loading...' : 'Submit'}
    </button>
  );
}

在自定义 Hook 中使用 await

自定义 Hook 可以封装异步逻辑，方便在多个组件中复用。

import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
      setLoading(false);
    };

    fetchData();
  }, [url]);

  return { data, loading };
}

function MyComponent() {
  const { data, loading } = useFetchData('https://api.example.com/data');

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

处理错误

使用 try/catch 捕获异步操作中的错误。

const handleClick = async () => {
  try {
    const response = await fetch('https://api.example.com/submit');
    if (!response.ok) throw new Error('Network response was not ok');
    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error('Error:', error);
  }
};

在类组件中使用 await

类组件中可以通过生命周期方法或事件处理函数使用 await。

import React, { Component } from 'react';

class MyComponent extends Component {
  state = { data: null };

  async componentDidMount() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    this.setState({ data: result });
  }

  render() {
    return <div>{this.state.data ? this.state.data.message : 'Loading...'}</div>;
  }
}