详解解决使用axios发送json后台接收不到的问题


Posted in Javascript onJune 27, 2018

问题描述

按照axios官网例子发起请求传递json,后台接受到的数据为空,一直卡在options阶段。

尝试的方法

开始以为是接口有问题,使用postman测试下,一切正常,百思不得其解,看了好多issue也解决不了,加了headers:{'content-type':'application/json'}也没用。

官网上是说,传json就按application/json进行处理,然而并没有卵用;之后套了一层JSON.stringify(data)content-type又变成表单格式了==。

然后翻自己之前的代码,发现写法如出一辙,怀疑是版本号的问题,然而并不是==。。。。考虑到可能和服务端有关系。

原代码如下:

import axios from 'axios';

export default function request(url, params) {
  return axios.post(`xxxxxx/${url}`, params)
    .then((response) => {
      console.log('response', response);
      return response;
    })
    .catch((error) => {
      console.log('error', error);
      return error;
    });
}

最后想想还是用fetch吧(确实用了,发现还是有这个问题,现在深度怀疑是服务端将参数类型卡的太死了,还有polyfill的问题就放弃了,如果有知道的小伙伴请留言告诉我,谢谢),实在不行就ajax(还要封装成promise,哭)。出于对axios的坚持,终于找到了解决方法。

解决方法

就是添加qs库,将json序列化之后传递,详见这个issue。

代码:

import axios from 'axios';
import qs from 'qs';

export default function request(url, params) {
  return axios.post(`https://xxxxxxxx/${url}`, qs.stringify(params))
    .then((response) => {
      console.log('response', response);
      return response;
    })
    .catch((error) => {
      console.log('error', error);
      return error;
    });
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
小程序实现分类页
Jul 12 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
vue中v-model的应用及使用详解
Jun 27 #Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 #Javascript
Vue实现todolist删除功能
Jun 26 #Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 #Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 #Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
在vue中使用公共过滤器filter的方法
Jun 26 #Javascript
You might like
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
javascript &&和||运算法的另类使用技巧
2009/11/28 Javascript
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
jquery中radio checked问题
2015/03/16 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
python多线程http下载实现示例
2013/12/30 Python
Python中itertools模块用法详解
2014/09/25 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
给Python入门者的一些编程建议
2015/06/15 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
init进程的作用
2015/08/20 面试题
人力资源管理专业自荐书范文
2014/02/10 职场文书
村庄绿化方案
2014/05/07 职场文书
支部组织生活会方案
2014/06/10 职场文书
学校献爱心活动总结
2014/07/08 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers