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 相关文章推荐
屏蔽浏览器缓存另类方法
Oct 09 PHP
PHP新手上路(九)
Oct 09 PHP
自动分页的不完整解决方案
Jan 12 PHP
php生成xml简单实例代码
Dec 16 PHP
字母顺序颠倒而单词顺序不变的php代码
Aug 08 PHP
PHP中strtr字符串替换用法详解
Nov 26 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
Mar 23 PHP
php实现简单的MVC框架实例
Sep 23 PHP
php+resumablejs实现的分块上传 断点续传功能示例
Apr 18 PHP
phpMyAdmin通过密码漏洞留后门文件
Nov 20 PHP
解决laravel5.4下的group by报错的问题
Oct 16 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
Oct 20 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
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP闭包实例解析
2014/09/08 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
做web开发 先学JavaScript
2014/12/12 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
python使用super()出现错误解决办法
2017/08/14 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
python flask实现分页的示例代码
2018/08/02 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Python文件操作函数用法实例详解
2019/12/24 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
创建学习型党组织实施方案
2014/03/29 职场文书
法制宣传日活动总结
2014/04/29 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
车贷收入证明范本
2014/09/14 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
指导老师鉴定意见
2015/06/05 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技