JavaScript fetch请求body中如何正确插入自定义变量

问题原因 #

1. 你尝试的${size}插值语法仅对反引号(`)包裹的模板字符串生效，用普通单/双引号包裹的字符串不会识别该语法。
2. 手动拼接JSON字符串极易出现转义、格式错误，你原代码中用[]包裹请求体属于格式错误，JSON对象需要用{}包裹。

最优解决方案（推荐） #

不要手动拼接JSON字符串，先构造JS对象再通过JSON.stringify()序列化，完全避免格式、转义、变量插入问题：

var SIZE = "NI115N001-A130045000";
// 构造请求体对应JS对象，变量直接赋值即可
const requestBody = {
  // 注意：GraphQL接口通常需要传入query字段，你可根据自身需求补充对应mutation语句
  variables: {
    addToCartInput: {
      productId: SIZE,
      clientMutationId: "addToCartMutation"
    }
  }
};

fetch("https://www.zalando.pl/api/graphql/add-to-cart/", {
  headers: {
    "accept": "*/*",
    "accept-language": "pl-PL,pl;q=0.9",
    "content-type": "application/json",
    "x-zalando-feature": "pdp",
  },
  referrerPolicy: "strict-origin-when-cross-origin",
  body: JSON.stringify(requestBody),
  method: "POST"
});

模板字符串插值方案（可选） #

如果你坚持直接写字符串，用反引号包裹字符串后使用${SIZE}插入变量即可：

var SIZE = "NI115N001-A130045000";
fetch("https://www.zalando.pl/api/graphql/add-to-cart/", {
  headers: {
    "accept": "*/*",
    "accept-language": "pl-PL,pl;q=0.9",
    "content-type": "application/json",
    "x-zalando-feature": "pdp",
  },
  referrerPolicy: "strict-origin-when-cross-origin",
  // 反引号包裹模板字符串，${SIZE}插入变量，同时修正了原代码错误的[]为{}
  body: `{"variables":{"addToCartInput":{"productId":"${SIZE}","clientMutationId":"addToCartMutation"}}}`,
  method: "POST"
});

注意事项 #

• 绝大多数GraphQL接口要求请求体必须携带query字段标识要执行的操作，如果你测试时接口报错，记得补充对应的mutation查询语句到请求体中。

内容的提问来源于stack exchange，提问作者Lutrix