React Native 采用Fetch方式发送跨域POST请求

Fetch以后是趋势,势必要取代传统的Ajax,而且RN框架支持Fetch。下面仅做了一个跨域请求的例子,在本域请求是一样的,而且更简单一些。客户端环境用的是RN写的一个页面,也可以用浏览器的console控制台模拟。后端服务用的是NodeJs express框架。http://blog.csdn.net/u012620506/article/details/52346264

  

1)Fetch请求

[javascript]  view plain  copy
  1. //发送Ajax请求  
  2.     sendAjax(){  
  3.         //POST方式,IP为本机IP  
  4.         fetch("http://192.168.111.102:8085", {  
  5.             method: "POST",  
  6.             mode: "cors",  
  7.             headers: {  
  8.                 "Content-Type""application/x-www-form-urlencoded"  
  9.             },  
  10.             body: 'key=1'  
  11.         }).then(function (res) {  
  12.             console.log("fetch request ", JSON.stringify(res.ok));  
  13.             if(res.ok){  
  14.                 res.json().then(function (json) {  
  15.                     console.info(json);  
  16.                     Alert.alert('提示','来自后台数据:名字'+json.name+'、年龄'+json.age,[{text: '确定', onPress: () => console.log('OK Pressed!')},]);  
  17.                 });  
  18.             }else{  
  19.                 Alert.alert('提示','请求失败',[{text: '确定', onPress: () => console.log('OK Pressed!')},]);  
  20.             }  
  21.   
  22.         }).catch(function (e) {  
  23.             console.log("fetch fail");  
  24.             Alert.alert('提示','系统错误',[{text: '确定', onPress: () => console.log('OK Pressed!')},]);  
  25.         });  
  26.     }  

1、mode属性控制是否允许跨域。same-origin(同源请求)、no-cors(默认)和cros(允许跨域请求),第一种跨域求情会报error,第二种可以请求其他域的脚本、图片和其他资源,但是不能访问response里面的属性,第三种可以获取第三方数据,前提是所访问的服务允许跨域访问。否则,会出现如下错误:

 

2、Fetch请求后台时,返回时一个Promise对象。对象支持解析返回数据的方法有:arrayBuffer()、blob()、formData()、json()、text()。

3、Body传入参数,注意!注意!注意!重要的事情说三次,只能传啊a=1&b=2...这种参数形式,不可传对象{a:1,b:2,...},用JSON.stringify({a:1,b:2,...})也不行。在jQuery中,传入对象框架会自动封装成formData的形式,fetch没有这个功能。

4、使用时请注意浏览器版本,低版本不支持此对象。RN是可以用的

2) Nodejs express框架开启允许跨域请求:
[javascript]  view plain  copy
  1. //设置跨域访问  
  2. app.all('*'function(req, res, next) {  
  3.     res.header("Access-Control-Allow-Origin""*");  
  4.     res.header("Access-Control-Allow-Headers""X-Requested-With");  
  5.     res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
  6.     res.header("X-Powered-By",' 3.2.1');  
  7.     res.header("Content-Type""application/json;charset=utf-8");  
  8.     next();  
  9. });  
3) Nodejs express框架开启处理POST数据功能,默认POST请求的参数是在请求体里面,用res.query是获取不到的,为{};需要使用res.body获取,前提是要在express框架里面开启body解析功能,否则显示undefined。

[javascript]  view plain  copy
  1. var express = require('express');  
  2. //Post方式请求参数放在请求体里面,需引用body-parser解析body  
  3. var bodyParser = require("body-parser");  
  4. var app = express();  
  5.   
  6. // 引用  
  7. app.use(bodyParser.urlencoded({ extended: false }));  
4) 支持jsonp方式跨域访问,开启跨域访问后用传统的jsonp方式请求时,会报错。因为jsonp请求需要返回一个callback包裹的数据,否则解析出错。此处有一个坑,用$.ajax({method: POST ,dataType: jsonp })方式请求时,依然发送的是GET请求。
[javascript]  view plain  copy
  1. //json数据  
  2. var  data  =   { "name":   "Test",   "age":   "19" };  
  3.   
  4. app.get('/'function(req, res) {  
  5.     console.log('get..........');  
  6.     console.log(req.query);  
  7.     if (req.query && req.query.callback) {  
  8.         var str = req.query.callback + "(" + JSON.stringify(data) + ")"//jsonp    
  9.         console.log('jsonp: '+str);  
  10.         res.end(str);  
  11.     }else{  
  12.         console.log('json: '+JSON.stringify(data));  
  13.         res.end(JSON.stringify(data));  
  14.     }  
  15. });  
5)完整代码:

1、RN前端

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
           
           
/**
* Created by linyufeng on 2016/8/22.
*/
import React , { Component } from 'react' ;
import {
AppRegistry ,
StyleSheet ,
Text ,
TouchableHighlight ,
Alert ,
View
} from 'react-native' ;
class HelloWorld extends Component {
//发送Ajax请求
sendAjax (){
//POST方式
fetch ( "http://192.168.111.102:8085" , {
method : "POST" ,
mode : "cors" ,
headers : {
"Content-Type" : "application/x-www-form-urlencoded"
},
body : 'key=1'
}). then ( function ( res ) {
console . log ( "fetch request " , JSON . stringify ( res . ok ));
if ( res . ok ){
res . json (). then ( function ( json ) {
console . info ( json );
Alert . alert ( '提示' , '来自后台数据:名字' + json . name + '、年龄' + json . age ,[{ text : '确定' , onPress : () => console . log ( 'OK Pressed!' )},]);
});
} else {
Alert . alert ( '提示' , '请求失败' ,[{ text : '确定' , onPress : () => console . log ( 'OK Pressed!' )},]);
}
}). catch ( function ( e ) {
console . log ( "fetch fail" );
Alert . alert ( '提示' , '系统错误' ,[{ text : '确定' , onPress : () => console . log ( 'OK Pressed!' )},]);
});
}
render () {
return (
< View style = { styles . container } >
< TouchableHighlight style = { styles . wrapper }
onPress = { this . sendAjax } >
< View style = { styles . button } >
< Text > 点击发送 Ajax 请求 < /Text>
< /View>
< /TouchableHighlight>
< /View>
);
}
}
const styles = StyleSheet . create ({
container : {
flex : 1 ,
justifyContent : 'center' ,
alignItems : 'center' ,
backgroundColor : '#F5FCFF' ,
},
wrapper : {
borderRadius : 5 ,
marginBottom : 5 ,
},
button : {
backgroundColor : '#eeeeee' ,
padding : 10 ,
},
});
AppRegistry . registerComponent ( 'HelloWorld' , () => HelloWorld );
 来自CODE的代码片
fetch.js
2、NodeJs

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
           
           
/**
* Created by linyufeng on 2016/8/22.
*/
var express = require ( 'express' );
//Post方式请求参数放在请求体里面,需引用body-parser解析body
var bodyParser = require ( "body-parser" );
var app = express ();
// 引用
app . use ( bodyParser . urlencoded ({ extended : false }));
//设置跨域访问
app . all ( '*' , function ( req , res , next ) {
res . header ( "Access-Control-Allow-Origin" , "*" );
res . header ( "Access-Control-Allow-Headers" , "X-Requested-With" );
res . header ( "Access-Control-Allow-Methods" , "PUT,POST,GET,DELETE,OPTIONS" );
res . header ( "X-Powered-By" , ' 3.2.1' );
res . header ( "Content-Type" , "application/json;charset=utf-8" );
next ();
});
//json数据
var data = { "name" : "Test" , "age" : "19" };
app . get ( '/' , function ( req , res ) {
console . log ( 'get..........' );
console . log ( req . query );
if ( req . query && req . query . callback ) {
var str = req . query . callback + "(" + JSON . stringify ( data ) + ")" ; //jsonp  
console . log ( 'jsonp: ' + str );
res . end ( str );
} else {
console . log ( 'json: ' + JSON . stringify ( data ));
res . end ( JSON . stringify ( data ));
}
});
app . post ( '/' , function ( req , res ) {
console . log ( 'post............' );
console . log ( req . body );
console . log ( 'json: ' + JSON . stringify ( data ));
res . end ( JSON . stringify ( data ));
});
app . listen ( 8085 , function () {
console . log ( 'Listening on port 8085...' );
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值