前言

• 我們使用的APP都需要從服務(wù)器上獲取數(shù)據(jù)，那么就必須要請求網(wǎng)絡(luò)數(shù)據(jù)末荐，在React-Native中可以用ajax去請求網(wǎng)絡(luò)數(shù)據(jù)侧纯，但更多情況下是采用fetch API。

一甲脏、fetch發(fā)送get請求

• fetch發(fā)送get請求

fetch(http://192.168.0.138:3000/data.json) // 1.發(fā)送請求
            .then((response)=>response.json()) // 2. 把數(shù)據(jù)轉(zhuǎn)成json
            .then((responseJson)=>{                   
                  //   3. 根據(jù)數(shù)據(jù)處理UI界面
            })
            .catch((error)=>{                
                 // 4.  捕獲到錯誤異常時(shí)調(diào)用 
            })

• fetch發(fā)送請求眶熬，如果沒有設(shè)置請求方式，默認(rèn)是get請求块请；

• then用于函數(shù)回調(diào)娜氏，當(dāng)上一操作完成后，就會自動執(zhí)行then的回調(diào)函數(shù)墩新，并且自動把處理完的結(jié)果贸弥，作為參數(shù)傳遞給then的回調(diào)函數(shù)。

• get請求簡單封裝

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

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

        // 3.拼接參數(shù)
       api_url += totalParamStr;
       fetch(api_url)
           .then((response)=>response.json())
           .then((responseJson)=>{ // 成功回調(diào)
               successBack(responseJson);
           })
           .catch((error)=>{ // 失敗回調(diào)
               failureBack(error);
           })
   }
};

<p></p>
<p></p>
<p></p>
<p></p>

二、fetch發(fā)送post請求

• fetch發(fā)送post請求

fetch('http://192.168.0.138:3000/userlogin/', {
  method: 'POST', // 請求方式
  headers: {  // 請求頭
    'Accept': 'application/json',  // 接收的是json格式數(shù)據(jù)
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({   // 把json對象轉(zhuǎn)成字符串
    firstParam: 'yourValue',  // 要傳遞的參數(shù)
    secondParam: 'yourOtherValue',
  })
})

• application/json請求臣疑，案例簡單實(shí)操

module.exports = { 
    Post(){
        fetch('http://192.168.0.138:3000/userlogin',{
            method:'POST',
            headers:{
                 'Content-Type':'application/json'  // 不能寫錯
            },
            body:JSON.stringify({   // 把json對象轉(zhuǎn)成字符串
                 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 {參數(shù)列表} param
     * @param {成功回調(diào)} success
     * @param {失敗回調(diào)} 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);
            })
    }
}

<p></p>
<p></p>
<p></p>
<p></p>

長按圖片-->識別圖中二維碼

近期正在把公眾賬號的文章轉(zhuǎn)移到簡書盔憨，如果要了解第一動態(tài)，請關(guān)注我的微信公眾賬號讯沈，帶你從零到一的進(jìn)行React Native開發(fā)實(shí)戰(zhàn)郁岩，在其他文章中會有對應(yīng)的code和資料發(fā)放！