javascript - 如何使用 javascript 正确发布 x-www-form-urlencoded 数据？

Question

<分区>

Answer 1

您正在构建一个编码名称/值对数组，并将其作为 POST 的 body 直接传递。但是fetch不接受该参数中的数组。

对代码的最小改动是使用 & 作为分隔符加入数组:

return fetch(
    `${serverAddress}/api/shopProducts`,
    {
        method: 'POST',
        body: formBody.join("&"), // <===== here
        headers: {
           'Content-Type': 'application/x-www-form-urlencoded'
        }
    }
). /* etc */

或者，使用 FormData ，因为这正是它的用途::-)

getInsideMenu(categoryid,shopid){
    var formBody = new FormData();
    formBody.set("categoryId", categoryid);
    formBody.set("shopId", shopid);
    formBody.set("page", "0");
    return fetch(
        `${serverAddress}/api/shopProducts`,
        {
            method: 'POST',
            body: formBody,
            headers: {
               'Content-Type': 'application/x-www-form-urlencoded'
            }
        }
    ).then((res)=>(res.json()));
}

(根据您的需要，您可以使用 set 或 append 。以上使用 set。)

---

旁注 1:

这一行:

).then((res)=>(res.json()));

...不需要大部分 ():

).then(res => res.json());

旁注 2:

不要忘记检查是否成功；不这样做是使用 fetch 时常见的错误。 fetch 不会拒绝 HTTP 错误(如 404 或 500)。如果你想拒绝 HTTP 错误，你必须自己做:

return fetch(/*...*/)
    .then(res => {
        if (!res.ok) {
            throw new Error(res.status);
        }
        return res;
    })
    .then(res => res.json());