React Native 之 Networking

---

许多移动应用需要从远程URL加载资源。你可能想要一个POST请求 一个REST API,或者你可能只需要获取一块静态内容从另一个服务器。

Using Fetch

为了满足您的网络需求 RN 提供 Fetch API 。Fetch类似你之前使用过XMLHttpRequest或其他网络API ，你可以参考MDN指南使用Fetch更多信息。

Making requests

为了从任意URL获取内容,只是通过URL获取:

fetch('https://mywebsite.com/mydata.json')

Fetch 也需要一个可选的允许您定制HTTP请求第二个参数。您可能希望指定附加头,或使一个POST请求:

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

看看Fetch请求文档属性的完整列表。

Handling the response

上面的例子展示了如何做一个请求。在许多情况下,你会想要做一些与响应。

网络是一种固有的异步操作。Fetch 的方法将返回一个Promisethat 直接编写异步工作代码:

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

在RN中、您还可以使用该ES2017 异步/等待有序排列:

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

别忘了捕获抛出任何错误,否则他们会默默地丢失。

默认情况下,iOS将阻止任何不使用SSL加密的请求。如果您需要fetch明文的URL(始于http)首先您将需要添加一个应用程序传输安全例外。如果你提前知道你需要访问什么领域,它是更安全的只是添加对于那些demains例外;如果domains 是未知的,直到运行时可以完全禁用ats。看到苹果的文档了解更多信息。

Using Other Networking Libraries

XMLHttpRequest API是建在 React Native 里。这意味着您可以使用第三方的库如 frisbee 盘或axios ,或者如果你喜欢你可以直接使用XMLHttpRequest API。

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

XMLHttpRequest的安全模型不同于网站,在RN app、没有CORSin概念。

WebSocket Support

React Native也支持WebSockets,协议提供全双工通信渠道在一个TCP连接。

var ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  // connection opened

  ws.send('something'); // send a message
};

ws.onmessage = (e) => {
  // a message was received
  console.log(e.data);
};

ws.onerror = (e) => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = (e) => {
  // connection closed
  console.log(e.code, e.reason);
};

您的应用程序现在可以显示所有的数据,你可能很快就需要组织这些内容分成几个屏幕。来管理这些屏幕之间的过渡,你需要了解导航。

---

关注公众号：

                       

                                              更多精彩文章等你来！！！

---

[1]:参考文献 http://facebook.github.io/react-native/docs/network.html