weex stream 之fetch的getpost获取Json数据

Posted 有棱角的圆

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了weex stream 之fetch的getpost获取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&param2=p2’。



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






以上是关于weex stream 之fetch的getpost获取Json数据的主要内容,如果未能解决你的问题,请参考以下文章

Weex系列之Weex入门准备

getPos封装

Weex系列之Module源码解析

使用 Fetch Streams API 异步消费分块数据而不使用递归

JavaScript GETPOS

getPos,offsetTop