无论何种平台,网络数据的获取都是十分重要的,最近学习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:'',
})
//
// 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:'',
})

其中的toParams是自己写的一个工具方法:

toParams(obj) {
var param = ""
for(const name in obj) {
if(typeof obj[name] != 'function') {
param += "&" + name + "=" + encodeURI(obj[name])
}
}
return param.substring()
},

小结:其实body字符串的格式是‘param1=p1&param2=p2’。


注意:fetch请求在电脑端浏览器会被提醒跨域,请求被拦截,直接用手机测试

weex stream 之fetch的get、post获取Json数据的更多相关文章

  1. android客户端从服务器端获取json数据并解析的实现代码

    今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下   首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的U ...

  2. (转)android客户端从服务器端获取json数据并解析的实现代码

    今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下       首先客户端从服务器端获取json数据 1.利用HttpUrlConnection   复制代码 ...

  3. android客户端从服务器端获取json数据并解析的实现代码(重要)

    首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的URL中获取数组 * @param urlPath * @return * @throws Exc ...

  4. jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 function BuildS ...

  5. Netflix Falcor获取JSON数据

    Netflix开源了JavaScript库Falcor,它为从多个来源获取JSON数据提供了模型和异步机制. Netflix利用Falcor库实现通过JSON数据填充他们网页应用的用户界面.所有来自内 ...

  6. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  7. jquery用ajax方式从后台获取json数据,将内容填充到下拉列表。

    从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...

  8. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  9. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  10. jquery通过ajax方法获取json数据不执行success回调

    问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...

随机推荐

  1. MySQL 中文字符集排序

    SELECT 字段名 FROM 表 ORDER BY CONVERT(字段名 USING gbk) ASC;

  2. for,while陈述

    今天我们来说一下for 和while循环 Python循环语句的控制结构图如下所示: for 是Python程序员使用最多的语句,for 循环用于迭代容器对象中的元素,这些对象可以是列表.元组.字典. ...

  3. linux系统坏了,进不了登陆界面怎么办?

    装oracle时,命令弄错了,结果系统崩溃之后就进不去系统了,启动后光标一直在闪烁,就是不显示登陆界面. 网上查了很多,什么grub引导之类的,完全没办法恢复系统. 系统坏了倒是无所谓,主要是系统上还 ...

  4. CENTOS安装ElasticSearch(转)

    From: https://my.oschina.net/topeagle/blog/591451?fromerr=mzOr2qzZ CENTOS安装ElasticSearch ElasticSear ...

  5. (转)Python: super 没那么简单

    原文:https://mozillazg.com/2016/12/python-super-is-not-as-simple-as-you-thought.html python 约定¶ 单继承¶ 多 ...

  6. vue插件ele使用小坑

    1.ele-table组件中selection如何默认选中 使用官网提供的api-->>Table Methods中的toggleRowSelection,关于这个api基本介绍就不说了. ...

  7. Android 开发工具类 35_PatchUtils

    增量更新工具类[https://github.com/cundong/SmartAppUpdates] import java.io.File; import android.app.Activity ...

  8. wangEditor使用简记

    页面 <!--用父容器来控制宽度--> <div style="width:800px"> <!--用当前元素来控制高度--> <text ...

  9. tensorflow 优化图

    当我们把训练好的tensorflow训练图拿来进行预测时,会有多个训练时生成的节点,这些节点是不必要的,我们需要在预测的时候进行删除. 下面以bert的图为例,进行优化 def optimize_gr ...

  10. AJAX(Jquery)

    一)jQuery常用AJAX-API 目的:简化客户端与服务端进行局部刷新的异步通讯 (1)取得服务端当前时间 简单形式:jQuery对象.load(url) 返回结果自动添加到jQuery对象代表的 ...