关于前端传参问题

淡水千痕 发表于 2022-5-25 11:59

如图所示：postman这样调用才可以通过

下图：swagger测试也可以通过。

前端如果用axios调用post如何写？是传到body的数据格式错误吗？求大佬们指导一下！

//页面调用方法
//arr为一个数组（["2022-1-1","2022-1-2"]）

const res = await batchSave(JSON.stringify(arr))

//api接口
export function batchSave (data){
return Ajax.post(
'/calendarInfo/batchSave',
data,
{
   timeout:999999,
   headers:{
   "Content-Type": "application/json;charset=UTF-8",
   }
}
)
}

纸偶发表于 2022-5-25 14:55

不用转成JSON，直接传对象就可以了

SpeII 发表于 2022-5-25 15:10

// Send a POST request
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
注：此处是官方示例：https://www.npmjs.com/package/axios

lcbreak 发表于 2022-5-25 15:18

const arr = ["2022-01-11", "2022-02-18", "2022-03-01", "2022-04-09", "2022-05-21"]
axios.post("/calendarInfo/batchSave", arr).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
根你的需求大概就是这样，建议看看axios文档。

淡水千痕 发表于 2022-5-25 16:08

大佬们有空帮我项目调用一下看看怎么写？
我在Vue项目无法调用成功！
但是postman和swagger都可以
大佬们帮我测试一下接口如果代码调用可以吗
地址：http://rqh35x.natappfree.cc/cyy/calendarInfo/getList
参数{
"dateStr": 2022
}

mysticalspear 发表于 2022-5-25 16:34

json是键值对啊你直接传数组肯定不得行吧

mysticalspear 发表于 2022-5-25 16:37

https://blog.csdn.net/qq_42277520/article/details/108605405

lcbreak 发表于 2022-5-25 20:22

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
</head>

<body>
<div id="app">
   <div v-for="item in list" :key="item" class="content">{{item}}</div>
</div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const API = "http://rqh35x.natappfree.cc/cyy/calendarInfo/getList"
const param = { "dateStr": 2022 }

const app = {
   data() {
         return {
            list: []
         }
   },
   methods: {
         // 使用axios获取接口参数
         getCalendarInfoList() {
            axios.post(API, param).then(res => {
               console.log(res);
               this.list = res.data.data
            }).catch(err => {
               console.log(err);
            })
         }
   },
   created() {
         this.getCalendarInfoList()
   }
}
Vue.createApp(app).mount('#app')
</script>

</html>
根据你的接口，简单弄了一个demo，获取数据正常

淡水千痕 发表于 2022-5-26 09:52

lcbreak 发表于 2022-5-25 20:22

谢谢，问题找到了。代{过}{滤}理问题导致的

页: [1]

吾爱破解 - 52pojie.cn's Archiver

关于前端传参问题