React Native Fetch網路請求

前言

• 我們使用的APP都需要從伺服器上獲取資料，那麼就必須要請求網路資料，在React-Native中可以用ajax去請求網路資料，但更多情況下是採用fetch API。

一、fetch傳送get請求

• fetch傳送get請求

  fetch(https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json) // 1.傳送請求
           .then((response)=>response.json()) // 2. 把資料轉成json
           .then((responseJson)=>{                   
                 //   3. 根據資料處理UI介面
           })
           .catch((error)=>{                
                // 4.  捕獲到錯誤異常時呼叫 
           })

  • fetch傳送請求，如果沒有設定請求方式，預設是get請求；
  • then用於函式回撥，當上一操作完成後，就會自動執行then的回撥函式，並且自動把處理完的結果，作為引數傳遞給then的回撥函式。

• get請求簡單封裝

module.exports = {
   /**
     * GET請求
     * @param {請求路徑} api_url
     * @param {引數列表} param
     * @param {成功回撥} successBack
     * @param {失敗回撥} failureBack
     */
   GET:(api_url, param, successBack, failureBack)=>{
        // 1. 引數拼接總串, 拼接操作符, 索引
        var allParamStr = ' '， flag = '?'， index = 0;

        // 2. 把json物件轉成字串
        var jsonStr = JSON.stringify(param);
        if (jsonStr !== undefine ||  jsonStr !== '{}') {  // 過濾
            for (key in param){
                if (index > 0) {
                    flag = '&'
                }
                allParamStr += mark + flag + '=' + param[key];
                index++;
            }
        }

        // 3.拼接引數
       api_url += totalParamStr;
       fetch(api_url)
           .then((response)=>response.json())
           .then((responseJson)=>{ // 成功回撥
               successBack(responseJson);
           })
           .catch((error)=>{ // 失敗回撥
               failureBack(error);
           })
   }
};

二、fetch傳送post請求

• fetch傳送post請求

fetch('http://192.168.0.138:3000/userlogin/', {
  method: 'POST', // 請求方式
  headers: {  // 請求頭
    'Accept': 'application/json',  // 接收的是json格式資料
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({   // 把json物件轉成字串
    firstParam: 'yourValue',  // 要傳遞的引數
    secondParam: 'yourOtherValue',
  })
})

• application/json請求，案例簡單實操

module.exports = { 
    Post(){
        fetch('http://192.168.0.138:3000/userlogin',{
            method:'POST',
            headers:{
                 'Content-Type':'application/json'  // 不能寫錯
            },
            body:JSON.stringify({   // 把json物件轉成字串
                 name: 'xzh', 
                 pwd: '12306',
             })
            })
            .then((response)=>response.json())
            .then((json)=>{
                console.log(json)
            })
            .catch((error)=>{
                console.log(error)
            })
    }
}

• POST請求簡單封裝

module.exports = {
    /**
     *  POST請求
     * @param {請求路徑} api_url
     * @param {引數列表} param
     * @param {成功回撥} success
     * @param {失敗回撥} failure
     */
      POST(api_url, param, success, failure) {
        fetch(api_url,{
            method:'POST',
            headers:{
                'Content-Type':'application/json'
            },
            body:JSON.stringify(param)
         })
            .then((response)=>response.json())
            .then((responseJson)=>{
                success(responseJson);
            })
            .catch((error)=>{
                failure(error);
            })
    }
}