摘要:使用進(jìn)行網(wǎng)絡(luò)請(qǐng)求推薦的形式進(jìn)行數(shù)據(jù)處理。這個(gè)時(shí)候自己去搜索了下,提出了兩種解決方案構(gòu)建表單數(shù)據(jù)參考這里但是這個(gè)在自己的機(jī)器上并不生效。服務(wù)端解決方案獲取里面的內(nèi)容,在中可以這樣寫(xiě)這個(gè)時(shí)候就可以打印出數(shù)據(jù)了。
React Native 使用 fetch 進(jìn)行網(wǎng)絡(luò)請(qǐng)求,推薦Promise的形式進(jìn)行數(shù)據(jù)處理。官方的 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); });
但是實(shí)際在進(jìn)行開(kāi)發(fā)的時(shí)候,卻發(fā)現(xiàn)了php打印出 $_POST為空數(shù)組。這個(gè)時(shí)候自己去搜索了下,提出了兩種解決方案:
構(gòu)建表單數(shù)據(jù)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)
參考這里
但是這個(gè)在自己的機(jī)器上并不生效。
服務(wù)端解決方案獲取body里面的內(nèi)容,在php中可以這樣寫(xiě):
$json = json_decode(file_get_contents("php://input"), true); var_dump($json["username"]);
這個(gè)時(shí)候就可以打印出數(shù)據(jù)了。然而,我們的問(wèn)題是 服務(wù)端的接口已經(jīng)全部弄好了,而且不僅僅需要支持ios端,還需要web和Android的支持。這個(gè)時(shí)候要做兼容我們的方案大致如下:
我們?cè)?b>fetch參數(shù)中設(shè)置了 header 設(shè)置 app 字段,加入app名稱:ios-appname-1.8;
我們?cè)诜?wù)端設(shè)置了一個(gè)鉤子:在每次請(qǐng)求之前進(jìn)行數(shù)據(jù)處理:
// 獲取 app 進(jìn)行數(shù)據(jù)集中處理 if(!function_exists("apache_request_headers") ){ $appName = $_SERVER["app"]; }else{ $appName = apache_request_headers()["app"]; } // 對(duì) RN fetch 參數(shù)解碼 if($appName == "your settings") { $json = file_get_contents("php://input"); $_POST = json_decode($json, TRUE ); }
這樣服務(wù)端就無(wú)需做大的改動(dòng)了。
對(duì) Fetch的簡(jiǎn)單封裝由于我們的前端之前用 jquery較多,我們做了一個(gè)簡(jiǎn)單的fetch封裝:
var App = { config: { api: "your host", // app 版本號(hào) 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":"系統(tǒng)繁忙,請(qǐng)稍候嘗試"}); }, 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;
這樣開(kāi)發(fā)者可以這樣使用:
App.send(url,{ success: function(res,isSuccess) { } })
更多內(nèi)容詳見(jiàn): https://github.com/JackPu/react-native-core-lib
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/79020.html
摘要:使用進(jìn)行網(wǎng)絡(luò)請(qǐng)求推薦的形式進(jìn)行數(shù)據(jù)處理。這個(gè)時(shí)候自己去搜索了下,提出了兩種解決方案構(gòu)建表單數(shù)據(jù)參考這里但是這個(gè)在自己的機(jī)器上并不生效。服務(wù)端解決方案獲取里面的內(nèi)容,在中可以這樣寫(xiě)這個(gè)時(shí)候就可以打印出數(shù)據(jù)了。 React Native 使用 fetch 進(jìn)行網(wǎng)絡(luò)請(qǐng)求,推薦Promise的形式進(jìn)行數(shù)據(jù)處理。官方的 Demo 如下: fetch(https://mywebsite.com/e...
摘要:本文將帶你了解不同請(qǐng)求的原理,以及如何為項(xiàng)目選擇合適的請(qǐng)求庫(kù)。小程序年微信小程序上線,隨后各大平臺(tái)都推出自己的小程序。下面為目前較火的請(qǐng)求庫(kù)。支持微信小程序和瀏覽器是一個(gè)基于的請(qǐng)求庫(kù),可以用在微信小程序和瀏覽器中,對(duì)上述平臺(tái)都做了兼容。 以前前端提到網(wǎng)絡(luò)請(qǐng)求通常是指瀏覽器,但現(xiàn)在隨著 Node.js、小程序的出現(xiàn),網(wǎng)絡(luò)請(qǐng)求不再局限于瀏覽器。本文將帶你了解不同請(qǐng)求的原理,以及如何為項(xiàng)目選...
摘要:以下題目和解析分別來(lái)源于我的新書(shū)程序員面試筆試寶典程序員面試筆試真題解析。類通過(guò)一個(gè)簡(jiǎn)單的外部接口與外界發(fā)生關(guān)系,對(duì)象與對(duì)象之間通過(guò)消息進(jìn)行通信。真題獲得實(shí)例化對(duì)象所屬類名字的函數(shù)是。 以下題目和解析分別來(lái)源于我的新書(shū)《PHP程序員面試筆試寶典》、《PHP程序員面試筆試真題解析》。 1、PHP常考基礎(chǔ) 1、PHP與ASP、JSP有什么區(qū)別?ASP全名Active Server Page...
showImg(https://segmentfault.com/img/bVbw3tK?w=1240&h=827); 前端工程師這個(gè)崗位,真的是反人性的 我們來(lái)思考一個(gè)問(wèn)題: 一個(gè)6年左右經(jīng)驗(yàn)的前端工程師: 前面兩年在用jQuery 期間一直在用React-native(一步一步踩坑過(guò)來(lái)的那種) 最近兩年還在寫(xiě)微信小程序 下面一個(gè)2年經(jīng)驗(yàn)的前端工程師: 并不會(huì)跨平臺(tái)技術(shù),他的兩年工作都是Reac...
閱讀 3049·2021-11-22 15:29
閱讀 1729·2021-10-12 10:11
閱讀 1751·2021-09-04 16:45
閱讀 2229·2021-08-25 09:39
閱讀 2790·2021-08-18 10:20
閱讀 2509·2021-08-11 11:17
閱讀 447·2019-08-30 12:49
閱讀 3305·2019-08-30 12:49