无论何种平台,网络数据的获取都是十分重要的,最近学习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. 动态执行 VB.NET 和 C# 代码

    有时候我们需要尝试动态地与一些代码进行交互,而不是只能执行程序内已编死的代码,那该怎么办呢?我首先推荐各种脚本语言,如Javascript.Lua.Python等等,这些脚本语言有很多优秀的第三方类库 ...

  2. C/C++掌握技能(二)

    多组输入:

  3. HTML textares的使用

    <textarea>标签定义及用法 在html中,<textarea>标签是用来定义一个多行的文本输入控件,在文本输入域中可以输入任意长度的文本.文本默认字体是等宽字体(Cou ...

  4. C++获取本机IP地址信息

    #include<winsock2.h> #include<iostream> #include<string> using namespace std; #pra ...

  5. 预处理命令使用详解----#if、#endif、#undef、#ifdef、#else、#elif

    预处理命令 在接触#if.#undef这类预处理指令前,大部分都都接触过#define.#include等预处理命令,通俗来讲预处理命令的作用就是在编译和链接之前,对源文件进行一些文本方面的操作,比如 ...

  6. Yii2 Apache + Nginx 路由重写

    一.什么是路由重写 原本的HTTP访问地址: www.test.com/index.php?r=post/view&id=100 表示这个请求将由PostController 的 action ...

  7. css3中那些鲜为人知但又很有用的属性

    概述 这是我在写移动端页面的时候遇到的,css3中鲜为人知但又很有用的属性,记录下来,供以后开发时参考,相信对其他人也有用. tap-highlight-color 在移动端开发中,我们需要在用户轻按 ...

  8. lucene使用与优化

    lucene使用与优化 1 lucene简介 1.1 什么是lucene Lucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿 ...

  9. 冰与火之歌居然是在 DOS 系统上写出来的

    简评:<权力的游戏>第八季(最终季)终于开播了!这部美剧的原著小说有一个很有趣的冷知识 -- 它是在运行 DOS 系统的计算机上写出来的.其实不少老粉都已经知道这个典故,不过听到老爷子的亲 ...

  10. Selenium3 + Python3自动化测试系列五——常用断言Assertion

    断言Assertion 验证应用程序的状态是否同所期望的一致. 常见的断言包括:验证页面内容,如标题是否为X或当前位置是否正确,或是验证该复选框是否被勾选. selenium 提供了三种模式的断言:a ...