前言
眼看很多公司都開始嘗試使用ReactNative,達到跨平臺開發(fā)，最近也寫了很多文章，希望讓更多想了解的同學快速上手ReactNative.
如果喜歡我的文章十酣，可以關注我微博:袁崢Seemygo
ReactNative之網(wǎng)絡請求
- 任何App都少不了從服務器獲取數(shù)據(jù)，那就需要進行網(wǎng)絡請求，那在RN中如何進行網(wǎng)絡請求了落剪。
fetch API
- RN網(wǎng)絡請求
常用方法
fetch: 發(fā)送請求,默認Get請求
then : 傳入一個回調函數(shù)，當上一次操作處理完,就會自動執(zhí)行then的回調函數(shù),并且自動把處理完的結果,作為參數(shù)傳遞給then的回調函數(shù)
response.json(): 把請求到的數(shù)據(jù)轉換為json
catch : 在請求或者處理數(shù)據(jù)失敗的時候,就會執(zhí)行catch里的回調函數(shù)尿庐，捕獲異常
GET請求
fetch(http://192.168.0.102:3000/home?name=xmg) // 發(fā)送GET請求
.then((response)=>response.json()) // 請求成功忠怖，把請求數(shù)據(jù)轉換為 JSON
.then((json)=>{ // 獲取JSON數(shù)據(jù)做事情
console.log(json)
})
.catch((error)=>{ // 請求失敗或者處理JSON數(shù)據(jù)失敗，調用
console.log(error)
})
GET請求封裝
- 每次請求抄瑟，都要自己拼接url和自己轉JSON數(shù)據(jù)凡泣，比較麻煩.
- 自定義XMGRequest請求類
- 封裝技巧：
- 直接使用class定義類，不需要繼承誰
- GET方法皮假，聲明類方法就好鞋拟，沒必要創(chuàng)建對象去調用，用static聲明
- 方法需要添加文檔注釋（/** + 回車）惹资，就有文檔注釋
- GET方法：提供四個參數(shù)贺纲，url,參數(shù)字典，成功回調褪测，失敗回調
- for in 遍歷參數(shù)字典,拼接參數(shù)
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 = '';
// 判斷字典參數(shù)是否有值
// 把字典轉換為字符串,如果字典為空,轉換為'{}'
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請求服務器
- 使用Node.js搭建猴誊，想了解的node.js，可以點擊Node.js搭建服務器侮措，Node.js發(fā)送網(wǎng)絡請求了解
- 利用Node.js搭建中轉服務器懈叹，服務器內部在請求其他數(shù)據(jù)
// 獲取express模塊
var express = require('express');
// 獲取http請求
var httpRequest = require('request');
// 創(chuàng)建服務器
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:一定不要寫錯,否則服務器解析不出來
// 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服務器搭建
- bodyParser：用于解析post參數(shù)
// 獲取express模塊
var express = require('express');
// 獲取http請求
var httpRequest = require('request');
// post解析對象
var bodyParser = require('body-parser');
// 創(chuàng)建服務器
var server = express();
// 這個代碼必須寫在post之前,因為bodyParser框架,用于中間件,而中間件優(yōu)于get,post請求調用
// 正確的邏輯也是,先把post請求參數(shù)解析出來,然后在post中就能通過body拿到了
// 由于bodyParser必須寫在post之前,因此接口文檔就應該寫清楚post請求參數(shù)類型,否則傳入錯誤,就不能解析了.
// 不同post參數(shù)類型,就必須用對應的解析器,否則解析出來就不對了
// 解析post的參數(shù),post參數(shù)是url拼接類型
// application/x-www-form-urlencoded
var jsonParser = bodyParser.urlencoded({extended:true});
// 使用中間件,當攔截到login,就立馬執(zhí)行,bodyParser因為用于中間件
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對象轉字符串 {name:xmg} => '{name:xmg}'
- 因為body:只能放字符串,所以必須要把JSON對象轉字符串
- 注意:Content-Type:一定不要寫錯,否則服務器解析不出來
// 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服務器搭建
// 獲取express模塊
var express = require('express');
// 獲取http請求
var httpRequest = require('request');
// post解析對象
var bodyParser = require('body-parser');
// 創(chuàng)建服務器
var server = express();
// 解析post的參數(shù),post參數(shù)是url拼接類型
// application/json
var jsonParser = bodyParser.json();
// 使用中間件,當攔截到login,就立馬執(zhí)行,bodyParser因為用于中間件
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 {成功回調(param:JSON)} success
* @param {失敗回調(param:ERROR)} failure
* @returns 功能:POST請求 application/x-www-form-urlencoded
*/
static PostWithHttpParam(url,param,success,failure){
var body = '';
// 判斷字典參數(shù)是否有值
// 把字典轉換為字符串,如果字典為空,轉換為'{}'
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 {成功回調(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
};
// 發(fā)送post請求
fetch(url,requestDesc)
.then((response)=>response.json())
.then((json)=>{
success(json);
})
.catch((error)=>{
failure(error);
})
}
