解析来自 Fetch api 和 JSON 的数据时遇到问题

Question

Happy Holidays!

I have the following function in a NEXT/React page:

async function onSubmit(values) {
    try {
      console.log(values);
      console.log(`JSON: ${JSON.stringify(values)}`);
      await postData("/api/put", values);
    } catch (error) {
      console.error(error);
    }

    async function postData(url = "", data = {}) {
      const response = await fetch(url, {
        method: "POST",
        mode: "cors",
        cache: "no-cache",
        credentials: "same-origin",
        headers: {
          "Content-Type": "application/json",
          "Content-Type": "application/x-www-form-urlencoded"
        },
        redirect: "follow",
        referrer: "no-referrer",
        body: JSON.stringify(data)
      });
      return await response.json(); // parses JSON response into native JavaScript objects
    }
  }

The second console.log() gives me the the following:

JSON: {"name":"Tim","email":"bob@bob.com","title":"grwewdfgherwfsdhtrdfsgh","body":"gfggfdsbngfdsbfnggdffbffgds"}

Looks great to me and leads me to believe the body: JSON.stringify(data) would yeild the same result, however; on my back-end, my request.body is:

body:
   [Object: null prototype] {
     '{"name":"Tim","email":"bob@bob.com","title":"fdsfsdfsdfsdf","body":"ytgfhjtrghrtesdrew"}': '' } }

When I try to do const data = JSON.parse(req.body); i get the following error:

(node:21676) UnhandledPromiseRejectionWarning: TypeError: Cannot convert object to primitive value
    at JSON.parse (<anonymous>)

Can someone please help me out?

Answer 1

aren't you already using await to get the response? could you try to return response.json() instead of return await response.json()?

The reason I think so is that await should be used when the statement resolves in a promise. response.json() does not.