从零开始RNReact Nativereact native

ReactNative之网络请求(十三)

2017-05-10  本文已影响2167人  袁峥

前言

眼看很多公司都开始尝试使用ReactNative,达到跨平台开发,最近也写了很多文章,希望让更多想了解的同学快速上手ReactNative.

如果喜欢我的文章,可以关注我微博:袁峥Seemygo

ReactNative之网络请求

fetch API

fetch: 发送请求,默认Get请求
then : 传入一个回调函数,当上一次操作处理完,就会自动执行then的回调函数,并且自动把处理完的结果,作为参数传递给then的回调函数
response.json(): 把请求到的数据转换为json
catch : 在请求或者处理数据失败的时候,就会执行catch里的回调函数,捕获异常

GET请求

fetch(http://192.168.0.102:3000/home?name=xmg) // 发送GET请求
            .then((response)=>response.json()) // 请求成功,把请求数据转换为 JSON
            .then((json)=>{                    // 获取JSON数据做事情
                console.log(json)
            })
            .catch((error)=>{               // 请求失败或者处理JSON数据失败,调用
                console.log(error)
            })

GET请求封装

export default class XMGRequest {


    /**
     * GET请求
     * @param {字符串} url
     * @param {字典} param
     * @param {成功回调(param:JSON)} success
     * @param {失败回调(param:ERROR)} failure
     * @returns 功能:GET请求
     */
    static GET(url,param,success,failure){

        // 总长度
        var totalParamStr = '';

        // 判断字典参数是否有值
        // 把字典转换为字符串,如果字典为空,转换为'{}'
        var jsonStr = JSON.stringify(param);

        if (jsonStr != '{}') {

            // 符合
            var mark = '?';

            var i = 0;

            for (key in param){

                if (i > 0) {
                    mark = '&'
                }

                var value = param[key];

                var paramStr = mark + key + '=' + value;

                totalParamStr += paramStr;

                i++;

            }

        }



        // 拼接url
        url += totalParamStr;

        fetch(url)
            .then((response)=>response.json())
            .then((json)=>{
                success(json);
            })
            .catch((error)=>{
                failure(error)
            })
    }

}

搭建Get请求服务器


// 获取express模块
var express = require('express');

// 获取http请求
var httpRequest = require('request');

// 创建服务器
var server = express();

server.get('/home',function (request,response) {

    // /home?a=list&c=data&type=1

    // 字符串截取,也可以使用request.query获取请求参数
    var url = request.url;

    var i = url.indexOf('?');

    var paramStr = url.substring(i);

    var baseUrl = 'http://api.budejie.com/api/api_open.php';

    url = baseUrl + paramStr;

    httpRequest(url,function (error, res, data) {

        response.send(data)

    });
    
});

server.listen(3000);

Post请求

application/x-www-form-urlencoded请求

    // application/x-www-form-urlencoded
    Post(){

        var requestOptional = {
            method:'POST',
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            },
            body:'account=xmg&pwd=123'
        };

        fetch('http://192.168.0.102:3000/login',requestOptional)
            .then((response)=>response.json())
            .then((json)=>{
                console.log(json)
            })
            .catch((error)=>{
                console.log(error)
            })
    }

application/x-www-form-urlencoded服务器搭建


// 获取express模块
var express = require('express');

// 获取http请求
var httpRequest = require('request');

// post解析对象
var bodyParser = require('body-parser');

// 创建服务器
var server = express();

// 这个代码必须写在post之前,因为bodyParser框架,用于中间件,而中间件优于get,post请求调用
// 正确的逻辑也是,先把post请求参数解析出来,然后在post中就能通过body拿到了
// 由于bodyParser必须写在post之前,因此接口文档就应该写清楚post请求参数类型,否则传入错误,就不能解析了.
// 不同post参数类型,就必须用对应的解析器,否则解析出来就不对了

// 解析post的参数,post参数是url拼接类型

// application/x-www-form-urlencoded
var jsonParser = bodyParser.urlencoded({extended:true});

// 使用中间件,当拦截到login,就立马执行,bodyParser因为用于中间件
server.use('/login',jsonParser);


server.post('/login',function (request,response) {

    // 获取post请求参数
    console.log(request.body);

    // 根据这个去查询数据

});

server.listen(3000);

application/json请求

// application/json
    
    Post(){

        var param = {
            account:'xmg',
            pwd:'123'
        };

        var paramStr = JSON.stringify(param);

        console.log(paramStr)
        
        // post请求描述
        var requestDesc = {
            method:'POST',
            headers:{
                'Content-Type':'application/json'
            },
            body:paramStr
        };

        // 发送post请求
        fetch('http://192.168.0.102:3000/login',requestDesc)
            .then((response)=>response.json())
            .then((json)=>{
                console.log(json)
            })
            .catch((error)=>{
                console.log(error)
            })
    }

application/json服务器搭建


// 获取express模块
var express = require('express');

// 获取http请求
var httpRequest = require('request');

// post解析对象
var bodyParser = require('body-parser');

// 创建服务器
var server = express();

// 解析post的参数,post参数是url拼接类型
// application/json
var jsonParser =  bodyParser.json();

// 使用中间件,当拦截到login,就立马执行,bodyParser因为用于中间件
server.use('/login',jsonParser);

// 监听post请求
server.post('/login',function (request,response) {

    // 获取post请求参数
    console.log(request.body);

    // 根据这个去查询数据

});


server.listen(3000);

Post请求封装

/**
     * POST请求,application/x-www-form-urlencoded
     * @param {字符串} url
     * @param {字典} param
     * @param {成功回调(param:JSON)} success
     * @param {失败回调(param:ERROR)} failure
     * @returns 功能:POST请求 application/x-www-form-urlencoded
     */
    static PostWithHttpParam(url,param,success,failure){

        var body = '';

        // 判断字典参数是否有值
        // 把字典转换为字符串,如果字典为空,转换为'{}'
        var jsonStr = JSON.stringify(param);

        if (jsonStr != '{}') {

            // 符合
            var mark = '';

            var i = 0;

            for (key in param){

                if (i > 0) {
                    mark = '&'
                }

                var value = param[key];

                var paramStr = mark + key + '=' + value;

                body += paramStr;

                i++;

            }

        }

        console.log(body);

        var requestOptional = {
            method:'POST',
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            },
            body:body
        };

        fetch(url,requestOptional)
            .then((response)=>response.json())
            .then((json)=>{
                success(json);
            })
            .catch((error)=>{
                failure(error);
            })
    }
 /**
     * POST请求,application/json
     * @param {字符串} url
     * @param {字典} param
     * @param {成功回调(param:JSON)} success
     * @param {失败回调(param:ERROR)} failure
     * @returns 功能:POST请求 application/json
     */
    static PostWithJsonParam(url,param,success,failure) {
        
        var paramStr = JSON.stringify(param);
        
        // post请求描述
        var requestDesc = {
            method:'POST',
            headers:{
                'Content-Type':'application/json'
            },
            body:paramStr
        };

        // 发送post请求
        fetch(url,requestDesc)
            .then((response)=>response.json())
            .then((json)=>{
                success(json);
            })
            .catch((error)=>{
                failure(error);
            })
    }

上传

上一篇下一篇

猜你喜欢

热点阅读