weex stream 之fetch的get、post獲取Json數據

不管何種平臺，網絡數據的獲取都是十分重要的，最近學習weex，不可避免的要學習weex的數據請求方法了。網址

我的感受，weex stream相較於其餘平臺，還算比較簡單了，可是因爲文檔以及官方代碼中的錯誤，致使網絡請求很難獲取到本身想要的數據，再次簡單記錄一下遇到的坑。

---

 

 

1、獲取modal，stream，config對象

var modal = weex.requireModule('modal');
var stream = weex.requireModule('stream');
var config = require('./config.js')

 

2、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
                        })
                    }
                })
            },

3、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請求在電腦端瀏覽器會被提醒跨域，請求被攔截，直接用手機測試