老夫子我正在憋方案书,听到身后传来细软的声音:“李哥,我这有个Bug调了很长时间了,您能帮我看一下吗?”。说这话的是我的好朋友,公司新来的前端小妹伊万卡。我起身向她走去,看到因长时间调试Bug漂亮的脸蛋上泛起的红晕,原来人会变的温柔,一点都不像我。
“
我使用vue中的http方法异步删除一个图片,后端怎么也接收不到我发的参数,同时还报个500。
”
听完伊万卡小妹描述的这个Bug临床表现,根据我多年的行医经验,已大体猜出病灶所在。但我并不想这么快结束这次义诊,你们是了解我的,让她透彻的懂了,才是我的选择。
老夫整理下外套,端庄的坐在了小妹的工位上,开始我的治病救人过程:望、闻、问、切。
一:望
在浏览器中把这个功能跑一下,打开调试窗口,找到这个XHR(XMLHttpRequest)请求连接,看Headers选项卡最下面,如下图所示
Request Payload,请注意这个数据格式。
二:闻
打开伊万卡小妹写的代码,我终于看出了传说中诗的感觉,同样26个字母,小妹敲出来的就是好看。
this.$vux.confirm.show({ title: "提示", content: "确定要删除此图片吗?", onConfirm() { that.$http({ method: "post", url: `${that.$$baseURL}/upload/delBelowImg`, headers: { token: token, 'Content-Type':'application/json' }, data:{ file:item.filePath, id:id, name:item.name } }).then(res => {}); } });
我发誓,以上代码绝对出自伊万卡之手,分毫未改。但当这个片段出现在我博文里时屁感觉没有,你说奇怪不奇怪。
三:问
我转头看向写java的川普,说:“小川,把你和伊万卡小妹对接的这个接口,代码发我一下”。5秒中之后,我收到了如下毫无美感的代码。
@RequestMapping(value = "/delBelowImg") @Transactional public void delBelowFile(@RequestParam Map<String, Object> params,HttpServletRequest request){ try { …… } catch (Exception e) { …… } }
@RequestParam 注意这个注解。
四:切
到这里我已经确切的知道了病因,我略作分析,在望环节,我们看到伊万卡小妹诗一样的代码发出请求,在浏览器发送请求参数格式是:
Request Payload,在问环节,看到小川写的代码,注解是@RequestParam,所以结果是,小妹发送的请求数据格式与小川的不统一,怪不得接受不到参数。
我在小妹的代码基础上略作改动如下(标红是改动部分):
const data = { file:item.filePath, id:id, name:item.name } this.$vux.confirm.show({ title: "提示", content: "确定要删除此图片吗?", onConfirm() { that.$http({ method: "post", url: `${that.$$baseURL}/upload/delBelowImg`, headers: { token: token, 'Content-Type':'application/json' }, params:data }).then(res => {}); } });
我再次打开浏览器,这次发送参数的格式成了 Query String Parameters,如下图所示
服务端成功接受到了参数,图片正常删除,伊万卡小妹脸上又有了笑容,连看我的眼神也更坚定了,好像再说这个男人没错。我知道我们的革命友谊又升华了。我对尹万卡小妹露出了无产阶级标志性笑容?
在伊万卡小妹问出“为什么”三个字时,我赶紧跑回了工位。
Bug是流动的
不由人的
何必激动着要理由
扩展:
有兴趣的同学请自行了解以下异步请求格式区别,要知道前方有个伊万卡小妹妹在等你解答呢,还不滚去学习。
前端:
Request Payload
Form Data
Query String Parameters
后端:
@RequestParam
@RequestBody
以上所述是小编给大家介绍的vue使用$http服务端收不到参数详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
本文向大家介绍Android中使用HTTP服务的用法详解,包括了Android中使用HTTP服务的用法详解的使用技巧和注意事项,需要的朋友参考一下 在Android中,除了使用Java.NET包下的API访问HTTP服务之外,我们还可以换一种途径去完成工作。Android SDK附带了Apache的HttpClient API。Apache HttpClient是一个完善的HTTP客户端,它提供了
本文向大家介绍详解Nuxt.js Vue服务端渲染摸索,包括了详解Nuxt.js Vue服务端渲染摸索的使用技巧和注意事项,需要的朋友参考一下 本文采用nuxt进行服务端渲染https://zh.nuxtjs.org/ Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐。国内很多
本文向大家介绍在 Angular6 中使用 HTTP 请求服务端数据的步骤详解,包括了在 Angular6 中使用 HTTP 请求服务端数据的步骤详解的使用技巧和注意事项,需要的朋友参考一下 第一步 准备好api接口地址, 例如 https://api.example.com/api/ 第二步 在根组件 app.components.ts 中引入 HttpClientModule 模块。 第三步
我正在开发一个基于云的后端HTTP服务,该服务将公开用于与一些on-prem系统的集成。客户机系统是由外部供应商定制的,它们是带有自己数据库的后端系统。这些系统部署在我们客户的公司中,我们无法访问它们,也无法控制它们。我们向供应商提供我们的API规范,他们实现客户机代码。 我的服务与客户交换的数据格式基于XML,并遵循一定的标准。供应商用不同的编程语言实现他们的客户机系统,随着时间的推移,新的供应
需要服务端渲染(SSR)吗? 在开始服务端渲染前,我们先看看它能给我们带来什么,以及什么时候需要用它。 SEO(搜索引擎优化) 谷歌和Bing可以很好地索引同步的JavaScript应用。同步在这里是个关键词。如果应用启动时有一个加载动画,然后内容通过ajax获取,那爬虫不会等待他们加载完成。 这意味着在异步获取内容的页面上很需要进行搜索引擎优化的时候,服务端渲染就很重要。 客户端的网络比较慢 用
本文向大家介绍AngularJS通过$http和服务器通信详解,包括了AngularJS通过$http和服务器通信详解的使用技巧和注意事项,需要的朋友参考一下 $http AngularJS提供了$http服务来同服务端进行通信,$http服务队浏览器的XMLHttpRequest对象进行了封装,让我们可以以ajax的方式来从服务器请求数据。 在AngularJS中与远程HTTP服务器交互时会用一