>

详解React Native 采取Fetch格局发送跨域POST请求

- 编辑:乐百家599手机首页 -

详解React Native 采取Fetch格局发送跨域POST请求

 /**
 * 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...');
});

其余可用网路库


  • React Native 中已经停放了 XMLHttpRequest API,一些基于 XMLHttpRequest 封装的第一方库也足以使用(如:axios、frisbee)但无法动用 jQuery,因为 jQuery 中还选取了过多浏览器才有而CR-VN中从不的事物

        var request = new XMLHttpRequest();
        request.onreadystatechange = (e) => {
            if (request.readyState != 4) {
                return;
            }
    
            if (request.status === 200) {
                console.log('success', request.responseText);
            } else {
                console.warn('error');
            }
        }
    
        request.open('GET', 'https://mywebsite.com/endpoint/');
        request.send();
    
  • 只顾:由于安全部制与网页遭遇有所差异:在使用中你能够访问任何网址,未有跨域的限量

WebSocket

  • React Native 还支持 WebSocket,这种协议能够在单个TCP连接上提供全双工的通讯信道

        var ws = new WebSocket('ws://host.com/path');
    
        ws.onopen = () => {
            // 打开一个连接
            ws.send('something'); // 发送一个消息
        };
    
        ws.onmessage = (e) => {
            // 接收到了一个消息
            console.log(e.data);
        };
    
        ws.onerror = (e) => {
            // 发生了一个错误
            console.log(e.message);
        };
    
        ws.onclose = (e) => {
            // 连接被关闭了
            console.log(e.code, e.reason);
        };
    

别的可用网路库


  • React Native 中已经嵌入了 XMLHttpRequest API,一些基于 XMLHttpRequest 封装的第3方库也足以使用(如:axios、frisbee)但不能够应用 jQuery,因为 jQuery 中还选用了许多浏览器才有而揽胜极光N中尚无的事物

        var request = new XMLHttpRequest();
        request.onreadystatechange = (e) => {
            if (request.readyState != 4) {
                return;
            }
    
            if (request.status === 200) {
                console.log('success', request.responseText);
            } else {
                console.warn('error');
            }
        }
    
        request.open('GET', 'https://mywebsite.com/endpoint/');
        request.send();
    
  • 只顾:由于安全体制与网页情状有所分化:在使用中您能够访问任何网址,未有跨域的限量

乐百家前段 1

获取 HTTP 头信息


    console.log(response.headers.get('Content-Type'));
                        ...
    console.log(response.headers.get('Date'));
  • 比方想了然越多,可在此以前往这几个网站实行学习:越来越多 fetch 学习点本人

前言

  • 上学本体系内容须求具备一定 HTML 开垦基础,未有基础的意中人能够先转至 HTML火速入门(一) 学习

  • 本身接触 React Native 时间并不是特意长,所以对内部的源委和品质精通恐怕会持有偏差,在学习中只要有错会及时修改内容,也应接万能的意中大家研究提议,多谢

  • 小说第二版出自简书,若是出现图片或页面呈现难题,烦请转至 简书 查看 也可望喜欢的对象能够点赞,多谢

什么是 fetch


  • fetch 近来还不是 W3C 规范,是由 whatag 担任研究开发。与 Ajax 分歧的是,它的 API 不是事件机制,而是选用当下盛行的 Promise(MDN Promise) 格局管理

  • 格式:

    fetch(url, init)
    .then((response) => {   // 数据解析方式
    })
    .then((responseData) => {       // 获取到的数据处理
    })
    .catch((error) => { // 错误处理
    })
    .done();
  • 地点的言传身教中的 init 是2个对象,他当中包蕴了:
    • method:请求格局(GET、POST、PUT等)。
    • headers:须要用到 Headers 对象使用那些参数。
    • body:须求发送的多少
    • mode:跨域设置(cors, no-cors, same-origin)
    • cache:缓存选项(default, no-store, reload, no-cache, force-cache, or only-if-cached)

译注:

  • body:不可传对象,用JSON.stringify({...})也不得以,在jQuery 中会自动将目的封装成 formData 情势,fetch不会。
  • mode属性调节师傅跨域,个中same-origin(同源请求,跨域会报error)、no-cors(私下认可,能够请求其余域的能源,不能够访问response内的个性)和 cros(允许跨域,能够获取第二方数据,供给条件是访问的劳务允许跨域访问)。
  • 应用 fetch 供给留意浏览器版本,但 React-Native 则无需考虑。
  • response 对象能够有如下两种剖析方法

    • arrayBuffer()
    • json()
    • text()
    • blob()
    • formData()
  • 上面是2个最大旨的伸手,只传入一个参数,默以为 GET 形式请求

    fetch(url)
    .then((response) => response.json())        // json方式解析,如果是text就是 response.text()
    .then((responseData) => {   // 获取到的数据处理
    })
    .catch((error) => {     // 错误处理 
    })
    .done();
  • 针对表单提交的呼吁,大家平时选择 POST 的方式。

方式一:

    fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        }
        body:"key1=value&key2=value…&keyN=value"
    })
    .then((response) => {       // 数据解析方式
    })
    .then((responseData) => {       // 获取到的数据处理
    })
    .catch((error) => { // 错误处理
    })
    .done();
  • JQuery 中,传入对象框架会活动封装成 formData 的形式,但是在 fetch 中绝非那几个意义,所以大家要求团结起首化三个 FormData 直接传给 body (补充:FormData也能够传递字节流达成上传图片效率)

方式二:

    let formData = new FormData();
    formData.append("参数", "值");
    formData.append("参数", "值");

    fetch(url, {
        method:'POST,
        headers:{},
        body:formData,
        }).then((response)=>{
            if (response.ok) {
                return response.json();
            }
        }).then((json)=>{
            alert(JSON.stringify(json));
        }).catch.((error)=>{
            console.error(error);
        })

译注:

  • application/x-www-form-urlencoded: 窗体数据被编码为名称/值对。那是专门的学业的编码格式。 multipart/form-data: 窗体数据被编码为一条音信,页上的每一个控件对应音信中的2个有的。 text/plain: 窗体数据以纯文本形式举办编码,当中不含任何控件或格式字符。
  • Fetch 跨域请求的时候暗中认可是不带 cookie 的,假诺急需开始展览设置 credentials:'include'。
 /**
 * 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);

什么是 fetch


  • fetch 近来还不是 W3C 规范,是由 whatag 肩负研究开发。与 Ajax 分歧的是,它的 API 不是事件机制,而是选择当下流行的 Promise(MDN Promise) 情势管理

  • 格式:

    fetch(url, init)
    .then((response) => {   // 数据解析方式
    })
    .then((responseData) => {       // 获取到的数据处理
    })
    .catch((error) => { // 错误处理
    })
    .done();
  • 地方的演示中的 init 是一个指标,他中间含有了:
    • method:请求形式(GET、POST、PUT等)。
    • headers:要求用到 Headers 对象使用那几个参数。
    • body:需求发送的数码
    • mode:跨域设置(cors, no-cors, same-origin)
    • cache:缓存选项(default, no-store, reload, no-cache, force-cache, or only-if-cached)

译注:

  • body:不可传对象,用JSON.stringify({...})也不得以,在jQuery 中会自动将目的封装成 formData 情势,fetch不会。
  • mode属性调整师傅跨域,个中same-origin(同源请求,跨域会报error)、no-cors(暗中同意,能够请求别的域的能源,不能够访问response内的性质)和 cros(允许跨域,能够猎取第3方数据,供给条件是造访的服务允许跨域访问)。
  • 运用 fetch 须求注意浏览器版本,但 React-Native 则无需思念。
  • response 对象能够有如下两种分析方法
    • arrayBuffer()
    • json()
    • text()
    • blob()
    • formData()
  • 下面是1个最基本的乞请,只传入3个参数,默感到 GET 方式请求
    fetch(url)
    .then((response) => response.json())        // json方式解析,如果是text就是 response.text()
    .then((responseData) => {   // 获取到的数据处理
    })
    .catch((error) => {     // 错误处理 
    })
    .done();
  • 本着表单提交的央浼,我们一般选拔 POST 的方式。

方式一:

    fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        }
        body:"key1=value&key2=value…&keyN=value"
    })
    .then((response) => {       // 数据解析方式
    })
    .then((responseData) => {       // 获取到的数据处理
    })
    .catch((error) => { // 错误处理
    })
    .done();
  • 乐百家前段,JQuery 中,传入对象框架会自动封装成 formData 的形式,但是在 fetch 中绝非那些意义,所以大家需求团结开始化一个 FormData 间接传给 body (补充:FormData也足以传递字节流完毕上传图片功效)

方式二:

    let formData = new FormData();
    formData.append("参数", "值");
    formData.append("参数", "值");

    fetch(url, {
        method:'POST,
        headers:{},
        body:formData,
        }).then((response)=>{
            if (response.ok) {
                return response.json();
            }
        }).then((json)=>{
            alert(JSON.stringify(json));
        }).catch.((error)=>{
            console.error(error);
        })

译注:

  • application/x-www-form-urlencoded: 窗体数据被编码为名称/值对。那是正规的编码格式。 multipart/form-data: 窗体数据被编码为一条音讯,页上的各样控件对应新闻中的四个有个别。 text/plain: 窗体数据以纯文本情势实行编码,在这之中不含任何控件或格式字符。
  • Fetch 跨域请求的时候默许是不带 cookie 的,借使急需开始展览设置 credentials:'include'。

别的可用网路库


  • React Native 中已经嵌入了 XMLHttpRequest API,一些依据 XMLHttpRequest 封装的第一方库也得以运用(如:axios、frisbee)但无法利用 jQuery,因为 jQuery 中还利用了成都百货上千浏览器才有而KugaN中绝非的事物

        var request = new XMLHttpRequest();
        request.onreadystatechange = (e) => {
            if (request.readyState != 4) {
                return;
            }
    
            if (request.status === 200) {
                console.log('success', request.responseText);
            } else {
                console.warn('error');
            }
        }
    
        request.open('GET', 'https://mywebsite.com/endpoint/');
        request.send();
    
  • 小心:由于安全机制与网页意况有所分裂:在运用中你能够访问任何网站,未有跨域的限定

获取 HTTP 头信息


    console.log(response.headers.get('Content-Type'));
                        ...
    console.log(response.headers.get('Date'));
  • 假若想询问更加的多,可在此以前往那些网站实行学习:越来越多 fetch 学习点小编

1、RN前端

网路请求


  • 在支付中,从网络上加载数据间接是非同一般和难点,特别是在做相应的底细优化方面,在React Native 中一般是用哪类形式加载网络数据吧?
    • React Native 中层出不穷是透过 Ajax 从服务器获取数据,在 componentDidMount 方法中创立 Ajex 请求,等到请求成功,再用 this.setState 方法重复渲染UI

网路请求


  • 在支付中,从互连网上加载数据直接是最首要和难题,尤其是在做相应的细节优化方面,在React Native 中不乏先例是用哪一类办法加载网络数据吧?
    • React Native 中见惯不惊是通过 Ajax 从服务器获取数据,在 componentDidMount 方法中成立 Ajex 请求,等到请求成功,再用 this.setState 方法重复渲染UI

汇总实例


  • 归咎实例间接放到了此间 React Native 之 实战项目(1)

译注:

  • 上面内容整理自 React-Native 汉语网
//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)); 
 } 
}); 

WebSocket

  • React Native 还支持 WebSocket,这种协议能够在单个TCP连接上提供全双工的通讯信道

        var ws = new WebSocket('ws://host.com/path');
    
        ws.onopen = () => {
            // 打开一个连接
            ws.send('something'); // 发送一个消息
        };
    
        ws.onmessage = (e) => {
            // 接收到了一个消息
            console.log(e.data);
        };
    
        ws.onerror = (e) => {
            // 发生了一个错误
            console.log(e.message);
        };
    
        ws.onclose = (e) => {
            // 连接被关闭了
            console.log(e.code, e.reason);
        };
    

综上所述实例


  • 汇总实例直接放到了这里 React Native 之 实战项目(1)

译注:

  • 上面内容整理自 React-Native 中文网

前言

  • 上学本类别内容必要全部一定 HTML 开采基础,未有基础的朋友能够先转至 HTML火速入门(一) 学习

  • 本人接触 React Native 时间并不是专门长,所以对内部的内容和天性通晓恐怕会具备偏差,在读书中壹旦有错会及时修改内容,也接待万能的朋友们议论提出,多谢

  • 小说第一版出自简书,假若出现图片或页面展现难点,烦请转至 简书 查看 也期待喜欢的爱人能够点赞,感谢

//设置跨域访问 
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(); 
}); 

汇总实例


  • 总结实例间接放到了这里 React Native 之 实战项目(一)

译注:

  • 下边内容整理自 React-Native 汉语网

获取 HTTP 头信息


    console.log(response.headers.get('Content-Type'));
                        ...
    console.log(response.headers.get('Date'));
  • 若是想打听越多,可从前往这么些网站进行学习:愈来愈多 fetch 学习点小编

网路请求


  • 在开荒中,从网络上加载数据直接是尊敬和难题,越发是在做相应的细节优化方面,在React Native 中习感到常是用哪类格局加载互联网数据吧?
    • React Native 中国和日本常是透过 Ajax 从服务器获取数据,在 componentDidMount 方法中创立 Ajex 请求,等到请求成功,再用 this.setState 方法重新渲染UI

本文由乐百家前段发布,转载请注明来源:详解React Native 采取Fetch格局发送跨域POST请求