weex stream 之fetch的get、post擷取Json資料

標籤：demo   請求   uri   stream   簡單   href   result   bsp   color   

無論何種平台，網路資料的擷取都是十分重要的，最近學習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的get、post擷取Json資料