摘要:使用進行網絡請求推薦的形式進行數據處理。這個時候自己去搜索了下,提出了兩種解決方案構建表單數據參考這里但是這個在自己的機器上并不生效。服務端解決方案獲取里面的內容,在中可以這樣寫這個時候就可以打印出數據了。
React Native 使用 fetch 進行網絡請求,推薦Promise的形式進行數據處理。官方的 Demo 如下:
fetch("https://mywebsite.com/endpoint/", { method: "POST", headers: { "Accept": "application/json", "Content-Type": "application/json", }, body: JSON.stringify({ username: "yourValue", pass: "yourOtherValue", }) }).then((response) => response.json()) .then((res) => { console.log(res); }) .catch((error) => { console.warn(error); });
但是實際在進行開發的時候,卻發現了php打印出 $_POST為空數組。這個時候自己去搜索了下,提出了兩種解決方案:
構建表單數據function toQueryString(obj) { return obj ? Object.keys(obj).sort().map(function (key) { var val = obj[key]; if (Array.isArray(val)) { return val.sort().map(function (val2) { return encodeURIComponent(key) + "=" + encodeURIComponent(val2); }).join("&"); } return encodeURIComponent(key) + "=" + encodeURIComponent(val); }).join("&") : ""; } // fetch body: toQueryString(obj)
參考這里
但是這個在自己的機器上并不生效。
服務端解決方案獲取body里面的內容,在php中可以這樣寫:
$json = json_decode(file_get_contents("php://input"), true); var_dump($json["username"]);
這個時候就可以打印出數據了。然而,我們的問題是 服務端的接口已經全部弄好了,而且不僅僅需要支持ios端,還需要web和Android的支持。這個時候要做兼容我們的方案大致如下:
我們在fetch參數中設置了 header 設置 app 字段,加入app名稱:ios-appname-1.8;
我們在服務端設置了一個鉤子:在每次請求之前進行數據處理:
// 獲取 app 進行數據集中處理 if(!function_exists("apache_request_headers") ){ $appName = $_SERVER["app"]; }else{ $appName = apache_request_headers()["app"]; } // 對 RN fetch 參數解碼 if($appName == "your settings") { $json = file_get_contents("php://input"); $_POST = json_decode($json, TRUE ); }
這樣服務端就無需做大的改動了。
對 Fetch的簡單封裝由于我們的前端之前用 jquery較多,我們做了一個簡單的fetch封裝:
var App = { config: { api: "your host", // app 版本號 version: 1.1, debug: 1, }, serialize : function (obj) { var str = []; for (var p in obj) if (obj.hasOwnProperty(p)) { str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); } return str.join("&"); }, // build random number random: function() { return ((new Date()).getTime() + Math.floor(Math.random() * 9999)); }, // core ajax handler send(url,options) { var isLogin = this.isLogin(); var self = this; var defaultOptions = { method: "GET", error: function() { options.success({"errcode":501,"errstr":"系統繁忙,請稍候嘗試"}); }, headers:{ "Authorization": "your token", "Accept": "application/json", "Content-Type": "application/json", "App": "your app name" }, data:{ // prevent ajax cache if not set "_regq" : self.random() }, dataType:"json", success: function(result) {} }; var options = Object.assign({},defaultOptions,options); var httpMethod = options["method"].toLocaleUpperCase(); var full_url = ""; if(httpMethod === "GET") { full_url = this.config.api + url + "?" + this.serialize(options.data); }else{ // handle some to "POST" full_url = this.config.api + url; } if(this.config.debug) { console.log("HTTP has finished %c" + httpMethod + ": %chttp://" + full_url,"color:red;","color:blue;"); } options.url = full_url; var cb = options.success; // build body data if(options["method"] != "GET") { options.body = JSON.stringify(options.data); } // todo support for https return fetch("http://" + options.url,options) .then((response) => response.json()) .then((res) => { self.config.debug && console.log(res); if(res.errcode == 101) { return self.doLogin(); } if(res.errcode != 0) { self.handeErrcode(res); } return cb(res,res.errcode==0); }) .catch((error) => { console.warn(error); }); }, handeErrcode: function(result) { // if(result.errcode == 123){ return false; } console.log(result); return this.sendMessage(result.errstr); }, // 提示類 sendMessage: function(msg,title) { if(!msg) { return false; } var title = title || "提示"; AlertIOS.alert(title,msg); } }; module.exports = App;
這樣開發者可以這樣使用:
App.send(url,{ success: function(res,isSuccess) { } })
更多內容詳見: https://github.com/JackPu/react-native-core-lib
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/21458.html
摘要:使用進行網絡請求推薦的形式進行數據處理。這個時候自己去搜索了下,提出了兩種解決方案構建表單數據參考這里但是這個在自己的機器上并不生效。服務端解決方案獲取里面的內容,在中可以這樣寫這個時候就可以打印出數據了。 React Native 使用 fetch 進行網絡請求,推薦Promise的形式進行數據處理。官方的 Demo 如下: fetch(https://mywebsite.com/e...
摘要:本文將帶你了解不同請求的原理,以及如何為項目選擇合適的請求庫。小程序年微信小程序上線,隨后各大平臺都推出自己的小程序。下面為目前較火的請求庫。支持微信小程序和瀏覽器是一個基于的請求庫,可以用在微信小程序和瀏覽器中,對上述平臺都做了兼容。 以前前端提到網絡請求通常是指瀏覽器,但現在隨著 Node.js、小程序的出現,網絡請求不再局限于瀏覽器。本文將帶你了解不同請求的原理,以及如何為項目選...
摘要:以下題目和解析分別來源于我的新書程序員面試筆試寶典程序員面試筆試真題解析。類通過一個簡單的外部接口與外界發生關系,對象與對象之間通過消息進行通信。真題獲得實例化對象所屬類名字的函數是。 以下題目和解析分別來源于我的新書《PHP程序員面試筆試寶典》、《PHP程序員面試筆試真題解析》。 1、PHP常考基礎 1、PHP與ASP、JSP有什么區別?ASP全名Active Server Page...
showImg(https://segmentfault.com/img/bVbw3tK?w=1240&h=827); 前端工程師這個崗位,真的是反人性的 我們來思考一個問題: 一個6年左右經驗的前端工程師: 前面兩年在用jQuery 期間一直在用React-native(一步一步踩坑過來的那種) 最近兩年還在寫微信小程序 下面一個2年經驗的前端工程師: 并不會跨平臺技術,他的兩年工作都是Reac...
閱讀 4746·2021-10-13 09:39
閱讀 1956·2019-08-29 11:12
閱讀 1150·2019-08-28 18:16
閱讀 1863·2019-08-26 12:16
閱讀 1249·2019-08-26 12:13
閱讀 2996·2019-08-26 10:59
閱讀 2302·2019-08-23 18:27
閱讀 2996·2019-08-23 18:02