先说问题
- 在页面接入接口的时候无论怎么调试，后台返回的result数组始终为空
- 接口文档要求
文章图片
2.调试结果
文章图片
可以看到result结果数组是有值的
3.上错误代码
getAccount() {
let param = {
ssoWorkbenchId:'1479366526093594626'
}
let url = '/sso/ssoWorkbench/listSubAccount'
httpAction(url, param, 'post').then(res => {
if (res.success) {
this.accountList = res.result
} else {
this.$message.warning(res.message)
}
})
},乍一看好像没什么问题对吧
4.页面发送请求时的返回
文章图片
文章图片
文章图片
- 可以对比一下参数那个id的值都是一样的，我还以为闹了鬼，五分钟抽了八根烟
- 下面揭晓答案
1.看一下接口调试时发请求的请求体（正常可以返回值的）是这样的
文章图片
文章图片
文章图片
他们之间的区别就在于请求参数数据类型不同，可以对比一下两者的载荷，请求不到数据时是请求载荷，正常时是表单数据，也就是说此接口接收的参数类型是表单类型。so?如何解决呢？上代码 - 改正后代码如下
getAccount() { let param = new FormData() param.append('ssoWorkbenchId', '1479366526093594626') let url = '/sso/ssoWorkbench/listSubAccount' httpAction(url, param, 'post').then(res => { if (res.success) { this.accountList = res.result } else { this.$message.warning(res.message) } }) },
文章图片
文章图片
文章图片
关于formData对象的应用，还要多查查文档，记得以后再遇到接口参数类型需要表单数据时会用到此对象即可
总结 【前后端交互-接入接口时注意参数要求的类型-formData】代码不会闹鬼，出一些莫名其妙的问题是技术不到位，精进！精进!
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例