fetch中如何通过get请求发送表单数据api

Question

我有一个 API，我在其中调用 get 请求以通过表单数据发送到查询参数，但我收到的 get 请求不采用表单数据。怎么做

http://ihub-fastapi-solubility.herokuapp.com/predict?solute=CC(C)(C)Br&solvent=CC(C)(C)O 这是 URL 溶质和溶剂是查询参数。

  const onSubmit = (e) => {
    e.preventDefault(); // <-- prevent the default form action

    const formData = new FormData();
    formData.set("solute", solutestate); // <-- local component state
    formData.set("solvent", solventstate); // <-- local component state
    console.log({ formData });

    fetch("http://ihub-fastapi-solubility.herokuapp.com/predict", {
      method: "get",
      body: formData,
    }).catch((err) => {
      setError(err.error);
      console.log(err);
    });

当我尝试使用 post 时出现此错误

Answer 1

FormData 不是这里的最佳选择，因为它主要用于构造 multipart/form-data 请求负载以用于 POST、PUT 和 PATCH 请求。

使用 URLSearchParams 轻松构造查询参数并将其序列化到 URL...

const fetch = function fakeFetch(url, init) {
  console.log(init.method, url)
}

const solutestate = "CC(C)(C)Br"
const solventstate = "CC(C)(C)O"

const params = new URLSearchParams({
  solute: solutestate,
  solvent: solventstate
})

fetch(`http://ihub-fastapi-solubility.herokuapp.com/predict?${params}`, {
  method: "GET"
})

使用 URLSearchParams 的额外好处是可以正确 URL encoding 您的数据。

fetch中如何通过get请求发送表单数据api

How to send form data through get request in fetch api

javascript

reactjs

post

fetch-api