如何从 Next/React 中的 POST 请求中获取 json 响应中的数据？

Question

我正在使用 Next.js api 路由来处理 POST 请求，然后将响应发送回前端。 我使用了 Rapid API 客户端扩展来确认有响应发送到前端。 我只是不知道如何在前端处理它。

这是 api 路线上的代码：

import clientPromise from "../../../config/mongodb";

export default async function userDetailsHandler(req, res) {
  const body = req.body;

  if (req.method == "POST") {
    const client = await clientPromise;
    const db = client.db("mood-board");
    let emailQuery = await db
      .collection("users")
      .find({ email: body.email })
      .limit(1)
      .toArray();
    let parsedData = JSON.parse(JSON.stringify(emailQuery));
    res.status(200).json(parsedData)
    console.log(parsedData)
  } else if(req.method = "GET") {
    
  }
} 

Answer 1

在以下示例中，您使用获取 api 来发布返回 promise 的数据。 您可以使用 then() ，它接受一个回调 function ，一旦 promise 返回，您就可以使用该回调对数据进行操作。

例子：

useEffect(() => {
    // POST request using fetch inside useEffect React hook
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: 'React Hooks POST Request Example' })
    };
    fetch('https://reqres.in/api/posts', requestOptions)
        .then(response => response.json())
        .then(data => setPostId(data.id));

// empty dependency array means this effect will only run once (like componentDidMount in classes)
}, []);