Javascript 调用API数据并将其传递给React.js中的其他组件

我想调用特定组件“API.js”中的所有API，并且我想将Json数据共享给其他组件，在下面的示例中，我使用Promise来共享Json，但是如果可能的话，我想在没有promises的情况下共享数据，然后告诉我

                                                 API.js File
import axios from "axios";
export async function TabelData() {
  return new Promise(async (resolve, reject) => {
    var res;
    console.log("Api Res=>", res);
    try {
      await axios({
        method: "get",
        url: "https://randomuser.me/api/?results=100",
      }).then(function (response) {
        res = response.data.results;
        console.log("Api Res", response);
      });
    } catch (error) {
      console.error(error);
    }
    resolve(res);
  });
}
                                                Search.js File
import { TabelData } from "../../../services/Api";
import "./Search.css";`enter code here`
const Search = () => {
  const [userData, setUserData] = useState([]);
  const [q, setQ] = useState("");

  useEffect(() => {
    TabelData().then((res) => {
      setUserData(res);
    });
  }, []);

---

有很多方法可以做到这一点，但您的主要目标是将结果存储在提示React时不会重新渲染的内容中，例如React上下文（请参阅）。上下文允许您存储任何内容并在任何子组件中检索它们

---

我喜欢的一个库通过缓存结果很好地实现了这一点，它是。您可以单独使用react查询，也可以与其他上下文一起使用。

您可能希望将TabelData函数简化一点，如下所示：

export async function TabelData() {
  try {
    const response = await axios({
      method: "get",
      url: "https://randomuser.me/api/?results=100"
    });
    return response.data.results;
  } catch (error) {
    console.error(error);
  }
}

---

没有承诺，你不能使用axios。这些调用是异步的，由承诺处理。还要注意，在新承诺中包装axios承诺（或任何其他返回承诺的方法）是一种反模式。只是增加了不必要的代码和复杂性