在执行多个获取请求时无法使用await

Question

我正在从 API 获取数据。第一个获取 URL 传递它返回的数据

success

，另一个获取 URL 然后使用第二个获取 URL 获取数据并打印它。我无法使用

await

，因为在执行第一个 URL 的获取请求后，第二个获取 URL 需要一些时间才能在调用数据之前获取数据，因此我正在考虑使用等待。输入是

CC(C)(C)Br

。这是代码链接

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;

Answer 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
}

Answer 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();
}