zoukankan      html  css  js  c++  java
  • 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&param2=p2’。

    
    

    注意:fetch请求在电脑端浏览器会被提醒跨域,请求被拦截,直接用手机测试
  • 相关阅读:
    canvas和svg
    表单控件及表单属性
    ajax
    数据结构与算法经典问题解析-Java语言描述
    SpringBoot
    ThreadLocal 原理
    代理模式-结构型
    框架面试
    Hash算法总结
    集合与多线程面试
  • 原文地址:https://www.cnblogs.com/sunjianfei/p/7298950.html
Copyright © 2011-2022 走看看