执行多个 fetch 请求时无法使用 await答案

【问题标题】：unable to use await while doing multiple fetch requests执行多个 fetch 请求时无法使用 await
【发布时间】：2022-02-17 02:37:25
【问题描述】：

我正在从 API 获取数据。第一个获取 URL 我传递它返回的数据success 和另一个获取 URL 然后使用第二个获取 URL 我获取数据并打印它。我无法使用await，因为在对第一个 URL 执行获取请求后，第二个获取 URL 需要时间来获取数据，然后再调用它来获取数据，所以我正在考虑使用 await。输入是CC(C)(C)Br。这是代码link

import React, { useState } from "react";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";

async function App() {
  const [solutestate, setSolutestate] = useState("");
  const [fetchData, setFetchData] = useState("");
  const [jsondata, setjsonData] = useState("");
  console.log(solutestate);
  console.log(fetchData);

  let params = new URLSearchParams({
    solute: solutestate
  });

  const onSubmit = (e) => {
    e.preventDefault();
    let [res1, res2] = await Promise.all([
      fetch(
        `https://fastapi-ihub-n7b7u.ondigitalocean.app/predict_two?${params}`,
        {
          method: "GET"
        }
      ),
      fetch(
        `https://fastapi-ihub-n7b7u.ondigitalocean.app/predict_solubility_json`,
        {
          method: "GET"
        }
      )
    ]);
    setFetchData(res1);
    setjsonData(res2);
  };

  return (
    <div className="App">
      <>
        <form noValidate onSubmit={onSubmit}>
          <div>
            Input: CC(C)(C)Br
            <TextField
              label="Solute"
              variant="outlined"
              onChange={(e) => setSolutestate(e.target.value)}
            />
            <Button type="submit" variant="contained">
              Submit
            </Button>
            <TextField label="Result" variant="outlined" value={fetchData} />
            {jsondata}
          </div>
        </form>
      </>
    </div>
  );
}
export default App;

【问题讨论】：

你的函数必须是async才能使用await
async function App() 已经是异步的。如果你的意思是向const onSubmit 添加异步，如果我添加它们，我会收到错误。
你的函数需要是异步的，而不是你的组件：p const onSubmit = async (e) => {

标签： javascript reactjs async-await fetch fetch-api

【解决方案1】：

await 关键字仅在接受异步代码的地方有效。

这里最简单的方法是使 onSubmit 函数异步。

const onSubmit = async (e) => {
    let [res1, res2] = await Promise.all([
        fetch(
            `https://fastapi-ihub-n7b7u.ondigitalocean.app/predict_two?${params}`,
            {
                method: "GET"
            }
        ),
        fetch(
            `https://fastapi-ihub-n7b7u.ondigitalocean.app/predict_solubility_json`,
            {
                method: "GET"
            }
        )
    ]);

// etc
}

【讨论】：

【解决方案2】：

React 组件不能像这样async。您可能想要的是在单击按钮后执行异步回调。

const onSubmit = async (e) => {
    e.preventDefault();
    let [res1, res2] = await Promise.all([ /* ... */ ]);
    setFetchData(res1);
    setjsonData(res2);
}

如果你不希望你的处理函数本身是async，你也可以只调用一个新的异步函数：

const onSubmit = (e) => {
    e.preventDefault();
    const fetchData = async () => {
        let [res1, res2] = await Promise.all([ /* ... */ ]);
        setFetchData(res1);
        setjsonData(res2);
    }
    fetchData();
}

【讨论】：