fetch(''https://facebook.github.io/react-native/movies.json'');

function getMoviesFromApiAsync() {
  return fetch(''https://facebook.github.io/react-native/movies.json'')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}

//一个 Promise 就是一个代表了异步操作最终完成或者失败的对象
export default class HttpUtils{
    static get=(url)=>{
        return new  Promise(((resolve, reject) => {//resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）
            fetch(url)//默认是GET
                .then(response=>response.json())//把数据解析成json格式,然后取出
                .then(result=>{
                       resolve(result);//表示完成
                })
                .catch(error=>{
                        reject(error);//表示失败
                })
            })
        )
    };
    static post=(url,data)=>{
        return new Promise(((resolve, reject) => {
            fetch(url,{
                method:''POST'',
                header:{
                    ''Accept'':''application/json'',//告诉服务器，我们能接受json格式的返回类型，
                    ''Content-Type'':''application/json'',//告诉服务器，我们提交的数据类型
                },
                body:JSON.stringify(data),//(把你想提交得数据序列化为json字符串类型，然后提交)body中的数据就是我们需要向服务器提交的数据,比如用户名,密码等
            })//返回 服务器处理的结果
                .then(response=>response.json())
                .then(result=>{
                    resolve(result);
                })
                .catch(error=> {
                    reject(error);
                })
            })
        )
    }
}
//数据转换成字符串 JSON.stringify(params)      //将数据JSON化 JSON.parse(responseJSON)

import HttpUtils from ''./HttpUtils'';

//get数据
onLoad=(url)=>{
    HttpUtils.get(url)//调用自定义组件方法，返回一个Promise
        .then(result=>{//then函数会返回一个新的promise
            this.setState({
                result:JSON.stringify(result),//序列化：转换为一个 (字符串)JSON字符串

            });
            console.log(result)
        })
        .catch(error=> {
            this.setState({
                result: JSON.stringify(error),//把错误信息格式化为字符串

            });
            console.log(result);
        })
};

//模拟登陆Post
onSubmit=(url,data)=>{
    HttpUtils.post(url,data)
        .then(result=>{
            this.setState({
                result:JSON.stringify(result),//序列化：转换为一个 (字符串)JSON字符串

            });
            console.log(result);
        })
        .catch(error=> {
            this.setState({
                result: JSON.stringify(error),//把错误信息格式化为字符串

            });
            console.log(result);
        })
};

<TouchableOpacity style={{marginVertical: 20 }} onPress={() => this.onLoad(''https://******/submit_ajax.ashx?action=APP_GetLines'')}>
          <Text>发送Get网络请求</Text>
        </TouchableOpacity>
        <TouchableOpacity style={{marginVertical: 20 }} onPress={() => this.onSubmit(''https://******/submit_ajax.ashx?action=APP_GetCardslist'',{Uid:''37985''})}>
          <Text>发送POST网络请求</Text>
        </TouchableOpacity>

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from ''react'';
import {
  AppRegistry,
  StyleSheet,
  Text,
  NetInfo,
  ToastAndroid,
  View
} from ''react-native'';

class NetworkInfo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isConnected: null,
      connectionInfo: null,
    };

  }

  componentDidMount() {
    //网络是否连接的监听
    NetInfo.isConnected.addEventListener(
      ''isConnected'',
      this._handleConnectivityChange
    );

    //网络状态变化的监听
    NetInfo.addEventListener(
      ''statusChange'',
      this._handleNetStatusChange
    );


    //检测网络是否连接
    NetInfo.isConnected.fetch().done(
      (isConnected) => { this.setState({ isConnected: isConnected }); }
    );
    //检测网络连接状态
    NetInfo.fetch().done(
      (connectionInfo) => { this.setState({ connectionInfo }); }
    );
  }



  componentWillUnmount() {
    //卸载两个监听
    NetInfo.isConnected.removeEventListener(
      ''isConnected'',
      this._handleConnectivityChange
    );
    NetInfo.removeEventListener(
      ''statusChange'',
      this._handleNetStatusChange
    );
  }


  _handleConnectivityChange = (isConnected) => {
    ToastAndroid.show((isConnected ? ''online'' : ''offline''), ToastAndroid.SHORT);
  }

  _handleNetStatusChange = (status) => {

    ToastAndroid.show(''当然网络状态：'' + status, ToastAndroid.SHORT);

  }

  render(){

   }
}

yarn add @react-native-community/netinfo
或
npm install --save @react-native-community/netinfo

react-native link @react-native-community/netinfo

import NetInfo from "@react-native-community/netinfo";

import { NetInfo } from "react-native";

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 * @flow
 */

import React from ''react'';
import {Text, View,TouchableWithoutFeedback} from ''react-native'';
import NetInfo from ''@react-native-community/netinfo'';

export default class IsConnected extends React.Component<{}, $FlowFixMe> {
  state = {
    isConnected: null,
    // isConnectionExpensive: null,
  };
  // _checkIfExpensive = () => {
  //   NetInfo.isConnectionExpensive().then(isConnectionExpensive => {
  //     this.setState({isConnectionExpensive});
  //   });
  // };
  componentDidMount() {
    NetInfo.isConnected.addEventListener(
      ''connectionChange'',
      this._handleConnectivityChange,
    );
    NetInfo.isConnected.fetch().done(isConnected => {
      this.setState({isConnected});
    });
  }

  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener(
      ''connectionChange'',
      this._handleConnectivityChange,
    );
  }

  _handleConnectivityChange = isConnected => {
    this.setState({
      isConnected,
    });
  };

  render() {
    return (
      <View style={{backgroundColor:''white'',marginTop:20,flex:1}}>
        <Text>{this.state.isConnected ? ''Online'' : ''Offline''}</Text>
      {/*  <TouchableWithoutFeedback onPress={this._checkIfExpensive}>
         <View>
           <Text>
             Click to see if connection is expensive:
             {this.state.isConnectionExpensive === true
               ? ''Expensive''
               : this.state.isConnectionExpensive === false
               ? ''Not expensive''
               : ''Unknown''}
           </Text>
         </View>
       </TouchableWithoutFeedback>*/}
      </View>
    );
  }
}

React Native (二) Fetch实现网络连接

一、Fetch API

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

二、Using Fetch

2.1 发送请求

fetch的用法是

fetch(url,{可选，可以放headers，method，body});

我们这里用一个官方的API测试

fetch(''https://facebook.github.io/react-native/movies.json'')

这个API是get请求，可以不写后面的{},但是如果是post请求，可能需要写参数和method，以下面为例子

fetch(''https://mywebsite.com/endpoint/'',{
method: ''POST'',headers: {
Accept: ''application/json'',''Content-Type'': ''application/json'',},body: JSON.stringify({
firstParam: ''yourValue'',secondParam: ''yourOtherValue'',}),});

2.2处理response

上面的例子展示了如何发出请求。在许多情况下，需要处理从服务器返回的response，

网络本质上是一种异步操作。Fetch方法将返回一个Promise，使以异步方式编写代码变得简单

function getMoviesFromApiAsync() {
  return fetch(''https://facebook.github.io/react-native/movies.json'')
    .then((response) => response.json()) //注意这里不要写花括号，可能会报错
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}

你也可以使用再 ES2017 async/await 语法处理异步

async function getMoviesFromApi() {
try {
let response = await fetch(
''https://facebook.github.io/react-native/movies.json'',);
let responseJson = await response.json();
return responseJson.movies;
} catch (error) {
console.error(error);
}
}

打印的返回的responce

以下是完整的代码，可以复制使用

import React from ''react'';
import { FlatList,ActivityIndicator,Text,View  } from ''react-native'';

export default class FetchExample extends React.Component {

  constructor(props){
    super(props);
    this.state ={ isLoading: true}
  }

  componentDidMount(){
    return fetch(''https://facebook.github.io/react-native/movies.json'')
      .then((response) => response.json())
      .then((responseJson) => {

    this.setState({
      isLoading: false,dataSource: responseJson.movies,function(){

    });

  })
  .catch((error) =>{
    console.error(error);
  });

  }



  render(){

if(this.state.isLoading){
  return(
    <View style={{flex: 1,padding: 20}}>
      <ActivityIndicator/>
    </View>
  )
}

return(
  <View style={{flex: 1,paddingTop:20}}>
    <FlatList
      data={this.state.dataSource}
      renderItem={({item}) => <Text>{item.title},{item.releaseYear}</Text>}
      keyExtractor={({id},index) => id}
    />
  </View>
);

  }
}

效果图：

在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架，此文将简要介绍下 fetch 的基本使用。

在 AJAX 时代，进行请求 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求。
现在产生的fetch框架简直就是为了提供更加强大、高效的网络请求而生，虽然在目前会有一点浏览器兼容的问题，但是当我们进行 Hybrid App 开发的时候，如我之前介绍的Ionic和React Native，都可以使用 fetch 进行完美的网络请求。

1. fetch 初体验

在 Chrome 浏览器中已经全局支持了 fetch 函数，打开调试工具，在 Console 中可以进行初体验。
先不考虑跨域请求的使用方法，我们先请求同域的资源，如在我的博客页面中，打开 Console 进行如下请求。

1

fetch("http://blog.parryqiu.com").then(function(response){console.log(response)})

返回的数据：

这样就很快速地完成了一次网络请求，我们发现返回的数据也比之前的 XMLHttpRequest 丰富、易用的多。

2. 关于 fetch 标准概览

虽然 fetch 还不是作为一个稳定的标准发布，但是在其一直迭代更新的标准描述中，我们发现已经包含了很多的好东西。
fetch 支持了大部分常用的 HTTP 的请求以及和 HTTP 标准的兼容，如 HTTP Method，HTTP Headers，Request，Response。

3. fetch 的使用

3.1 兼容浏览器的处理

可以通过下面的语句处理浏览器兼容的问题。

3.2 一般构造请求的方法

使用 fetch 的构造函数请求数据后，返回一个Promise对象，处理即可。

3.3 fetch 构成函数的其他选项

我们可以将于 HTTP Headers 兼容的格式加入到请求的头中，如每次 API 的请求我们想不受缓存的影响，那么可以像下面这样请求：

3.4 返回的数据结构

在请求后的 Response 中，具体的定义在这里。
常用的有：

• Response.status 也就是 StatusCode，如成功就是200；
• Response.statusText 是 StatusCode 的描述文本，如成功就是OK；
• Response.ok 一个 Boolean 类型的值，判断是否正常返回，也就是 StatusCode 为200-299。

做如下请求：

返回的数据：

3.5 Body 参数

因为在 Request 和 Response 中都包含 Body 的实现，所以包含以下类型：

• ArrayBuffer
• ArrayBufferView (Uint8Array and friends)
• Blob/File
• string
• URLSearchParams
• FormData

在 fetch 中实现了对应的方法，并返回的都是 Promise 类型。

• arrayBuffer()
• blob()
• json()
• text()
• formData()

这样处理返回的数据类型就会变的特别地方便，如处理 json 格式的数据：

4. 浏览器兼容

目前项目给出的浏览器支持如下图，可以通过上面介绍的浏览器兼容处理办法解决此问题，不过相信很快就不需要考虑兼容问题了，在 Hybrid App 开发中使用基本没有问题，因为基本都是基于 Node.js 进行开发的。
有朋友提出兼容性问题的严谨性，其实通过 JS polyfill，已经可以获得很好的支持。

• 如使用A window.fetch JavaScript polyfill可以获得如下支持。

• 如使用fetch-ie8可以获得如下支持。

5. 结语

这里是一个格式更好的文档，比标准描述的页面更加清晰，供参考。
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
在使用 React Native 开发 App 的时候接触到了 fetch，发现的确非常方便高效，框架的设计模式也非常清晰灵活，更多的细节可以查阅相关文档，有什么问题可以留言讨论交流。

转载自：http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/

在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架，此文将简要介绍下 fetch 的基本使用。

在 AJAX 时代，进行请求 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求。
现在产生的fetch框架简直就是为了提供更加强大、高效的网络请求而生，虽然在目前会有一点浏览器兼容的问题，但是当我们进行 Hybrid App 开发的时候，如我之前介绍的Ionic和React Native，都可以使用 fetch 进行完美的网络请求。

1. fetch 初体验

在 Chrome 浏览器中已经全局支持了 fetch 函数，打开调试工具，在 Console 中可以进行初体验。
先不考虑跨域请求的使用方法，我们先请求同域的资源，如在我的博客页面中，打开 Console 进行如下请求。

1

fetch("http://blog.parryqiu.com").then(function(response){console.log(response)})

返回的数据：

这样就很快速地完成了一次网络请求，我们发现返回的数据也比之前的 XMLHttpRequest 丰富、易用的多。

2. 关于 fetch 标准概览

虽然 fetch 还不是作为一个稳定的标准发布，但是在其一直迭代更新的标准描述中，我们发现已经包含了很多的好东西。
fetch 支持了大部分常用的 HTTP 的请求以及和 HTTP 标准的兼容，如 HTTP Method，HTTP Headers，Request，Response。

3. fetch 的使用

3.1 兼容浏览器的处理

可以通过下面的语句处理浏览器兼容的问题。

3.2 一般构造请求的方法

使用 fetch 的构造函数请求数据后，返回一个Promise对象，处理即可。

3.3 fetch 构成函数的其他选项

我们可以将于 HTTP Headers 兼容的格式加入到请求的头中，如每次 API 的请求我们想不受缓存的影响，那么可以像下面这样请求：