ReactNative之網(wǎng)絡(luò)請求(十三)

前言

眼看很多公司都開始嘗試使用ReactNative,達(dá)到跨平臺開發(fā)，最近也寫了很多文章，希望讓更多想了解的同學(xué)快速上手ReactNative.

如果喜歡我的文章，可以關(guān)注我微博:袁崢Seemygo

ReactNative之網(wǎng)絡(luò)請求

  • 任何App都少不了從服務(wù)器獲取數(shù)據(jù)，那就需要進(jìn)行網(wǎng)絡(luò)請求，那在RN中如何進(jìn)行網(wǎng)絡(luò)請求了。

fetch API

  • RN網(wǎng)絡(luò)請求常用方法 
fetch: 發(fā)送請求,默認(rèn)Get請求
then : 傳入一個回調(diào)函數(shù)，當(dāng)上一次操作處理完,就會自動執(zhí)行then的回調(diào)函數(shù),并且自動把處理完的結(jié)果,作為參數(shù)傳遞給then的回調(diào)函數(shù)
response.json(): 把請求到的數(shù)據(jù)轉(zhuǎn)換為json
catch : 在請求或者處理數(shù)據(jù)失敗的時候,就會執(zhí)行catch里的回調(diào)函數(shù)，捕獲異常

GET請求

fetch(http://192.168.0.102:3000/home?name=xmg) // 發(fā)送GET請求
            .then((response)=>response.json()) // 請求成功，把請求數(shù)據(jù)轉(zhuǎn)換為 JSON
            .then((json)=>{                    // 獲取JSON數(shù)據(jù)做事情
                console.log(json)
            })
            .catch((error)=>{               // 請求失敗或者處理JSON數(shù)據(jù)失敗，調(diào)用
                console.log(error)
            })

GET請求封裝

  • 每次請求，都要自己拼接url和自己轉(zhuǎn)JSON數(shù)據(jù)，比較麻煩.
  • 自定義XMGRequest請求類
  • 封裝技巧：
    • 直接使用class定義類，不需要繼承誰
    • GET方法，聲明類方法就好，沒必要創(chuàng)建對象去調(diào)用，用static聲明
    • 方法需要添加文檔注釋（/** + 回車），就有文檔注釋
    • GET方法：提供四個參數(shù)，url,參數(shù)字典，成功回調(diào)，失敗回調(diào)
    • for in 遍歷參數(shù)字典,拼接參數(shù)
export default class XMGRequest {


    /**
     * GET請求
     * @param {字符串} url
     * @param {字典} param
     * @param {成功回調(diào)(param:JSON)} success
     * @param {失敗回調(diào)(param:ERROR)} failure
     * @returns 功能:GET請求
     */
    static GET(url,param,success,failure){

        // 總長度
        var totalParamStr = '';

        // 判斷字典參數(shù)是否有值
        // 把字典轉(zhuǎn)換為字符串,如果字典為空,轉(zhuǎn)換為'{}'
        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請求服務(wù)器


// 獲取express模塊
var express = require('express');

// 獲取http請求
var httpRequest = require('request');

// 創(chuàng)建服務(wù)器
var server = express();

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

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

    // 字符串截取,也可以使用request.query獲取請求參數(shù)
    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請求

  • Post請求有三種方式
    • application/x-www-form-urlencoded： 普通http請求方式，參數(shù)是普通的url參數(shù)拼接
    • application/json： JSON請求方式，參數(shù)是json格式
    • multipart/form-data: 文件上傳
  •  Fetch還有可選的第二個參數(shù)，可以用來定制HTTP請求一些參數(shù)。你可以定制header參數(shù)，請求方式，提交數(shù)據(jù)。

application/x-www-form-urlencoded請求

  • 注意:Content-Type:一定不要寫錯,否則服務(wù)器解析不出來
    // 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服務(wù)器搭建

  • bodyParser：用于解析post參數(shù)

// 獲取express模塊
var express = require('express');

// 獲取http請求
var httpRequest = require('request');

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

// 創(chuàng)建服務(wù)器
var server = express();

// 這個代碼必須寫在post之前,因?yàn)閎odyParser框架,用于中間件,而中間件優(yōu)于get,post請求調(diào)用
// 正確的邏輯也是,先把post請求參數(shù)解析出來,然后在post中就能通過body拿到了
// 由于bodyParser必須寫在post之前,因此接口文檔就應(yīng)該寫清楚post請求參數(shù)類型,否則傳入錯誤,就不能解析了.
// 不同post參數(shù)類型,就必須用對應(yīng)的解析器,否則解析出來就不對了

// 解析post的參數(shù),post參數(shù)是url拼接類型

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

// 使用中間件,當(dāng)攔截到login,就立馬執(zhí)行,bodyParser因?yàn)橛糜谥虚g件
server.use('/login',jsonParser);


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

    // 獲取post請求參數(shù)
    console.log(request.body);

    // 根據(jù)這個去查詢數(shù)據(jù)

});

server.listen(3000);

application/json請求

  • JSON.stringify(param) => JSON對象轉(zhuǎn)字符串 {name:xmg} => '{name:xmg}'
  • 因?yàn)閎ody:只能放字符串,所以必須要把JSON對象轉(zhuǎn)字符串
  • 注意:Content-Type:一定不要寫錯,否則服務(wù)器解析不出來
// 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
        };

        // 發(fā)送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服務(wù)器搭建


// 獲取express模塊
var express = require('express');

// 獲取http請求
var httpRequest = require('request');

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

// 創(chuàng)建服務(wù)器
var server = express();

// 解析post的參數(shù),post參數(shù)是url拼接類型
// application/json
var jsonParser =  bodyParser.json();

// 使用中間件,當(dāng)攔截到login,就立馬執(zhí)行,bodyParser因?yàn)橛糜谥虚g件
server.use('/login',jsonParser);

// 監(jiān)聽post請求
server.post('/login',function (request,response) {

    // 獲取post請求參數(shù)
    console.log(request.body);

    // 根據(jù)這個去查詢數(shù)據(jù)

});


server.listen(3000);

Post請求封裝

  • application/x-www-form-urlencoded
/**
     * POST請求,application/x-www-form-urlencoded
     * @param {字符串} url
     * @param {字典} param
     * @param {成功回調(diào)(param:JSON)} success
     * @param {失敗回調(diào)(param:ERROR)} failure
     * @returns 功能:POST請求 application/x-www-form-urlencoded
     */
    static PostWithHttpParam(url,param,success,failure){

        var body = '';

        // 判斷字典參數(shù)是否有值
        // 把字典轉(zhuǎn)換為字符串,如果字典為空,轉(zhuǎn)換為'{}'
        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);
            })
    }
  • application/json
 /**
     * POST請求,application/json
     * @param {字符串} url
     * @param {字典} param
     * @param {成功回調(diào)(param:JSON)} success
     * @param {失敗回調(diào)(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
        };

        // 發(fā)送post請求
        fetch(url,requestDesc)
            .then((response)=>response.json())
            .then((json)=>{
                success(json);
            })
            .catch((error)=>{
                failure(error);
            })
    }

上傳

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,525評論 19贊 139
  • AFHTTPRequestOperationManager 網(wǎng)絡(luò)傳輸協(xié)議UDP、TCP、Http、Socket、X...
    Carden閱讀 5,311評論 0贊 12
  • 混合開發(fā)的直白解釋是 Native 和 Web 技術(shù)都要用。但形式上，應(yīng)用仍然和瀏覽器無關(guān)，用戶還是需要在 App...
    迪亞波羅閱讀 1,657評論 0贊 13
  • 小川叔，職場十年先后橫跨三個領(lǐng)域換了七份工作，每一次都從頭開始，每一次都跨界轉(zhuǎn)行，從普通文員做到品牌總監(jiān)，從月薪1...
    剽悍一只貓閱讀 16,662評論 84贊 514
  • 這個世界上最大的悲哀之一就是“子欲養(yǎng)而親不在”。 古語有云“百善孝為先”，從嗷嗷待哺到牙牙學(xué)語，我們的父母為了我們...
    信仰之戰(zhàn)閱讀 378評論 0贊 0

友情鏈接更多精彩內(nèi)容