在 Vue JS 中使用 Axios 将 json 数据发布到 API 的问题

Posted 2023-02-16

【中文标题】在 Vue JS 中使用 Axios 将 json 数据发布到 API 的问题

【英文标题】：Problem Posting json data to API using Axios in Vue JS

【发布时间】：2021-07-03 23:31:56

【问题描述】：

我正在尝试创建一个 Axios 请求，我将在其中发布 json 数据。数据格式为

"qBody":"aaa","qAnswer":"bbb","qOptions":[],"qType":"GAP","qClass":6,"qSubject":1,"qChapter":1,"qCreatorid":1,"qCreatorrole":"admin"

但它发布为

"data":"qBody":"aaa","qAnswer":"bbb","qOptions":[],"qType":"GAP","qClass":6,"qSubject":1,"qChapter":1,"qCreatorid":1,"qCreatorrole":"admin"

这是我的代码 sn-p：

var data = 
              "qBody" : question,
              "qAnswer" : trueFalseAnswer,
              "qOptions" : qOptions,
              "qType" : questionCategory,
              "qClass" : className,
              "qSubject" : subjectName,
              "qChapter" : chapterName,
              "qCreatorid" : qCreatorid,
              "qCreatorrole" : qCreatorrole
            ;

    const newData =  JSON.stringify(data)
    
     this.$axios.post("http://128.199.192.87:8081/api/v1/questions/add",
                  newData
                ,
                  'Content-Type': "application/json"
                ).then((response)=>
                  console.log(response)
                )

我怎样才能使格式正确？提前致谢

【问题讨论】：

您阅读过文档吗？

当你说“它发布为...”你的意思是：“这就是我在浏览器控制台中看到的”？

没有。它来自浏览器的开发者选项的网络选项卡中的请求有效负载

能否请您使用codesandbox.io（或类似服务）创建一个runnable minimal reproducible example，确保它重现所描述的行为？你所说的几乎是不可能的。

【参考方案1】：

你是console.log()-ing 不是你发送的。这是从服务器返回的响应。如果您想记录您发送的内容，请使用：

console.log(newData);

...就在发出 POST 请求之前。

很可能，您不需要对请求进行字符串化。

您在控制台中看到的是服务器响应。根据他们文档中的response-schema，服务器的响应数据放在响应对象的.data 属性中。

因此，显然，服务器发回了相同的数据。对于大多数服务器，这意味着没有发生错误。

---

简而言之，您不会发送包装为 data: ... 的数据。如果你是，你会回来的： data: data: ...

【讨论】：

我已经从浏览器的开发者选项的网络选项卡中的请求有效负载中发布了上述 json。我尝试跳过对数据进行字符串化。