React Native Get,Post請求

React Native爲我們提供了fetch框架進行網絡請求。

Fetch請求

static async request(url, method, body, params) {
        DEBUG && console.log("#REQUEST NetUtil# [" + method + "] url=" + url + ",body=" + body);
        var timestamp=new Date().getTime()/1000;//當前時間毫秒值
        var user=await AsyncStorage.getItem('user');//緩存本地的用戶數據
        var token='';//用戶token
        if(user!=null){
            token=JSON.parse(user).token;
        }else{
            token='';
        }
        var sign= await Sign.createSign(params,timestamp);//獲取簽名
        return new Promise((resolve, reject)=> {
            fetch(url, {
                method: method,
                body: body,
                headers: new Headers({
                    'uid': '867909021770429',
                    'token':token,
                    'timestamp':timestamp,
                    'sign':sign,//簽名
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Connection': 'close'
                }),
            })
                .then((response)=> {
                    if(response.ok){
                        return response.json();
                    }else{
                        reject("服務器錯誤!");
                    }
                })
                .then((json)=> {
                    DEBUG && console.log("#RESPONSE# NetUitl ["+method+"] url = "+url+", body = "+body+",responseData="+json);
                    if(json.code==Constant.SUCCESS){
                        resolve(json.data);
                    }else{
                        reject(data.msg);
                    }
                })
                .catch((error)=> {
                    DEBUG && console.log("#RESPONSE# NetUitl ["+method+"] url = "+url+", body = "+body+", error="+error);
                    reject("服務器錯誤!");
                });
        });
    }

通過fetch（）函數我們可以指定請求的url，請求的method，請求的body以及請求的headers，fetch函數返回一個Promist對象，請求成功後會返回請求的Response對象，response.ok會過濾掉404，500這些請求錯誤，通過response.json()方法我們就可以獲得JOSN格式的服務器返回給我們的數據。

Get請求

//get請求 params爲一個Map對象
    static get(url, params) {
        if (params) {
            let paramsArray = []
            for(var item of params.entries()){
                paramsArray.push(item[0]+'='+encodeURIComponent(item[1]));
            }
            if (url.search(/\?/) === -1) {//拼接url
                url += '?' + paramsArray.join('&')
            } else {
                url += '&' + paramsArray.join('&')
            }
    }
        return this.request(url, 'get', undefined, params);
    }

Post請求

//pos請求
    static post(url, params) {
        var body = '';
        for (let item of params.entries()) {//拼接body
            body += item[0] + "=" + item[1] + "&";
        }
        body = body.substring(0, body.length - 1);
        return this.request(url, 'post', body, params);
    }

使用

• get方式

var params = new Map();
        params.set('pageNo', 1);
        params.set('pageSize', 20);
        params.set('version', '1.0.1');
        params.set('platform', 'android');
        params.set('provinceCode', '310000');
        return dispatch=> {
            NetUtil.get(HttpUrl.QUERY_DYNAMIC_LIST, params)
                .then((result)=> {
                    console.log(result);
                    dispatch({
                        type: ActionTypes.ACTION_DYNAMIC_LIST,
                        dynamicList: result,
                    })
                }, (error)=> {
                    console.log('error' + error);
                });
        }

• post方式

var params=new Map();//請求的參數
        params.set('username',this.state.username);
        params.set('password',this.state.password);
        params.set('cid','53b857f07b3ace9bdb2b99e0d65dc123');
        params.set('loDeviceInfo','AndroidA31');
        params.set('platfrom','Android');
        NetUtil.post(HttpUrl.LOGIN_URL,params)
            .then((result)=>{
                AsyncStorage.setItem("user",JSON.stringify(result));//保存用戶數據到本地
                NavigatorRoute.replaceToMainScene(this.props.navigator);//跳轉到主頁
            },(error)=>{
                ToastAndroid.show(error,ToastAndroid.SHORT);
            });

源碼