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);
            });

源码