weex stream 之fetch的get、post获取Json数据
无论何种平台,网络数据的获取都是十分重要的,最近学习weex,不可避免的要学习weex的数据请求方法了。网址
个人感觉,weex stream相较于其他平台,还算比较简单了,但是由于文档以及官方代码中的错误,导致网络请求很难获取到自己想要的数据,再次简单记录一下遇到的坑。
一、获取modal,stream,config对象
var modal = weex.requireModule('modal'); var stream = weex.requireModule('stream'); var config = require('./config.js')
二、get请求
get请求还好,按照官方的demo写就没什么问题了。
clickTypeGet:function(){ var me = this; stream.fetch({ method: 'GET', type: 'json', url: 'https://api.github.com/repos/alibaba/weex' }, function(ret) { if(!ret.ok){ me.getResult = "request failed"; modal.toast({ 'message': "失败", 'duration': 2.0 }) }else{ console.log('get---------:'+JSON.stringify(ret)); me.getResult = JSON.stringify(ret); modal.toast({ message: JSON.stringify(ret), duration: 2.0 }) } }) },
三、post请求
clickTypePost:function(){ var me = this; stream.fetch({ method:"POST", type:'json', url:'http://www.kuaidi100.com/query', headers:{'Content-Type':'application/x-www-form-urlencoded'}, // body:'type=shentong&postid=3333557693903', body:config.toParams( { type:'shentong', postid:'3333557693903', }) // // body:JSON.stringify({ // // type:'shentong', // postid:'3333557693903', // }), }, function(ret) { if(!ret.ok){ me.getResult = "request failed"; modal.toast({ 'message': "失败", 'duration': 2.0 }) }else{ console.log('get---------:'+JSON.stringify(ret.data)); me.getResult = JSON.stringify(ret); modal.toast({ message: JSON.stringify(ret.data), duration: 2.0 }) } },function(progress) { // JSON.stringify(progress.length); }) }
这里的body不能像官方一样写,官方是这么写的:
事实证明,这么写,始终获取不到数据,也会提示数据请求成功,但是想要的数据却始终没有
body:JSON.stringify({ type:'shentong', postid:'3333557693903', }),
经过几番乱试,终于发现,只是因为body写法不对,造成的post请求获取不到数据,我们是这么写的
body:config.toParams( { type:'shentong', postid:'3333557693903', })
其中的toParams是自己写的一个工具方法:
toParams(obj) { var param = "" for(const name in obj) { if(typeof obj[name] != 'function') { param += "&" + name + "=" + encodeURI(obj[name]) } } return param.substring(1) },
小结:其实body字符串的格式是‘param1=p1¶m2=p2’。
注意:fetch请求在电脑端浏览器会被提醒跨域,请求被拦截,直接用手机测试
初探佳境,多多学习交流