React Native 网络请求

很多移动应用都需要从远程地址中获取数据或资源。你可能需要给某个REST API发起POST请求以提交用户数据，又或者可能仅仅需要从某个服务器上获取一些静态内容——以下就是你会用到的东西。

使用Fetch

React Native 提供了和web标准一致的Fetch API，用于满足开发者访问网络的需求。下面是Fetch的简单使用。

1、发起网络请求

要从任意地址获取内容的话，只需要简单地将网址作为参数传递给fetch方法即可（fetch这个词本身也就是获取的意思）

fetch(“http://bbs.reactnative.cn/api/category/3”);

另外还有可选的参数，可以用来定制HTTP请求一些参数。可以指定header参数，或是指定用POST方法，又或是提交数据等，

fetch(‘http://bbs.reactnative.cn/api/category/3’ ,{

method:’POST’,

header:{

‘Accept’:’application/json’,

‘Content-Type’:’application/json’,

},

body: JSON.stringFy({

fristParam:’firstValue’,

secondParam:’secondValue’,

})

})

2、处理服务器的响应数据

网络请求天然是一种异步操作。Fetch方法会返回一个Promise，这种模式可以简化异步风格的代码。

所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。

Promise 对象有以下两个特点。

（1）对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

  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);

      });

  }

你也可以在React Native应用中使用ES7标准中的async/await 语法：

  // 注意这个方法前面有async关键字

  async getMoviesFromApi() {

    try {

      // 注意这里的await语句，其所在的函数必须有async关键字声明

      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);

    }

  }

别忘了catch住fetch可能抛出的异常，否则出错时你可能看不到任何提示。

使用其他的网络库

React Native中已经内置了XMLHttpRequest API(也就是俗称的ajax)。一些基于XMLHttpRequest封装的第三方库也可以使用，例如frisbee或是axios等。但注意不能使用jQuery，因为jQuery中还使用了很多浏览器中才有而RN中没有的东西（所以也不是所有web中的ajax库都可以直接使用）。

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);

};

http://bbs.reactnative.cn/api/category/3

function getdata(){

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

      .then((response)=> response.json())

      .then((responseJson) =>{

        AlertIOS.alert(responseJson)

      })

}