PHP获取不了React Native Fecth参数的解决办法


Posted in PHP onAugust 26, 2016

话不多说,我们直接来看示例

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的支持。这个时候要做兼容我们的方案大致如下:

    1、我们在fetch参数中设置了 header 设置 app 字段,加入app名称:ios-appname-1.8;

    2、我们在服务端设置了一个钩子:在每次请求之前进行数据处理:

// 获取 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) {
 }
})

总结

好了,到这里PHP获取不了React Native Fecth参数的问题就基本解决结束了,希望本文对大家的学习与工作能有所帮助,如果有疑问或者问题可以留言进行交流。

PHP 相关文章推荐
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
Apr 15 PHP
php学习笔记之 函数声明
Jun 09 PHP
PHP语言中global和$GLOBALS[]的分析 之二
Feb 02 PHP
php中3des加密代码(完全与.net中的兼容)
Aug 02 PHP
Linux下CoreSeek及PHP扩展模块的安装
Sep 23 PHP
神盾加密解密教程(一)PHP变量可用字符
May 28 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
Sep 20 PHP
Symfony2安装第三方Bundles实例详解
Feb 04 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
Jun 13 PHP
php判断文件上传图片格式的实例详解
Sep 30 PHP
PHP类与对象后期静态绑定操作实例详解
Dec 20 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
Oct 16 PHP
简单的pgsql pdo php操作类实现代码
Aug 25 #PHP
php mongodb操作类 带几个简单的例子
Aug 25 #PHP
php flush无效,IIS7下php实时输出的方法
Aug 25 #PHP
php 的反射详解及示例代码
Aug 25 #PHP
php 输入输出流详解及示例代码
Aug 25 #PHP
PHP 输出缓冲控制(Output Control)详解
Aug 25 #PHP
PHP中利用sleep函数实现定时执行功能实现代码
Aug 25 #PHP
You might like
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
javascript的事件描述
2006/09/08 Javascript
关于Javascript 的 prototype问题。
2007/01/03 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
python如何调用java类
2020/07/05 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
品质主管岗位职责
2014/03/16 职场文书
项目合作意向书范本
2014/04/01 职场文书
工程售后服务方案
2014/06/08 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
golang中的struct操作
2021/11/11 Golang