React异步操作处理：基于JSX实现跨文件数据请求与处理

嘿，我注意到你尝试用async/await写数据库请求的函数，但当前的写法有个关键问题：你在async函数里用了request.get的回调模式，这会让await完全失效——因为request.get本身是基于回调的，它不会返回Promise，所以外层的async函数会直接提前返回，回调里的return也没法把数据传递出去。

下面给你两种靠谱的实现方案，优先用async/await的Promise方案，完全符合你的需求：

方案一：把回调式请求封装成Promise（适配传统request库） #

如果坚持用request库，我们先把它包装成支持Promise的函数，这样就能和async/await完美配合了。

1. 单独的请求封装文件（比如api.js） #

import request from 'request';

// 先封装一个返回Promise的get请求工具函数
const promiseGet = (url) => {
  return new Promise((resolve, reject) => {
    request.get(url, (err, res) => {
      if (err) {
        reject(err); // 请求失败时抛出错误
        return;
      }
      resolve(res.body); // 请求成功时返回数据
    });
  });
};

// 你的getData函数，现在可以正常用async/await了
export async function getData() {
  try {
    const data = await promiseGet('你的数据库接口URL');
    console.log('拿到的数据：', data);
    return data;
  } catch (error) {
    console.error('请求出错啦：', error);
    // 这里可以选择处理错误，比如返回默认值，或者抛出让调用者处理
    throw error;
  }
}

2. 在React组件里调用这个函数 #

import { useState, useEffect } from 'react';
import { getData } from './api.js';

function DataDisplayComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [errorMsg, setErrorMsg] = useState(null);

  // 组件挂载时发起请求
  useEffect(() => {
    // 注意：不要直接把useEffect的回调写成async，会返回Promise导致警告
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const result = await getData();
        setData(result);
      } catch (err) {
        setErrorMsg(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  // 加载状态、错误状态的UI处理
  if (isLoading) return <div>正在加载数据...</div>;
  if (errorMsg) return <div>请求失败：{errorMsg}</div>;

  return (
    <div className="data-container">
      <h3>从数据库拿到的数据</h3>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataDisplayComponent;

方案二：用支持Promise的请求库（更推荐） #

因为request库已经被官方标记为废弃了，更推荐用本身就支持Promise的库，比如axios，代码会简洁很多：

1. api.js文件 #

import axios from 'axios';

export async function getData() {
  try {
    // axios.get直接返回Promise，await可以直接等待
    const response = await axios.get('你的数据库接口URL');
    console.log('拿到的数据：', response.data);
    return response.data;
  } catch (error) {
    console.error('请求出错：', error);
    throw error;
  }
}

2. React组件里的调用方式和方案一完全一样 #

直接复用上面的组件逻辑就行，不需要额外封装Promise，省心不少。

几个重要的小提醒 #

• 别在useEffect的回调里直接写async，因为useEffect期望返回清理函数或者undefined，直接写async会返回Promise，控制台会出现警告，所以要在内部定义一个async函数再调用。
• 一定要用try/catch包裹异步操作，避免出现未捕获的Promise错误，影响页面稳定性。
• 如果需要传递参数（比如查询条件、ID），可以给getData加参数：

  export async function getData(userId) {
    try {
      const response = await axios.get(`/api/users/${userId}`);
      return response.data;
    } catch (error) {
      throw error;
    }
  }
  

  然后在组件调用时传入参数就行~

内容的提问来源于stack exchange，提问作者Constance G