React Native网络请求

很多移动应用都需要从远程地址中获取数据或资源。你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容——以下就是你会用到的东西。新手可以对照这个简短的视频教程加深理解。

使用Fetch

React Native提供了和web标准一致的Fetch API,用于满足开发者访问网络的需求。如果你之前使用过XMLHttpRequest(即俗称的ajax)或是其他的网络API,那么Fetch用起来将会相当容易上手。这篇文档只会列出Fetch的基本用法,并不会讲述太多细节,你可以使用你喜欢的搜索引擎去搜索fetch api关键字以了解更多信息。

发起网络请求

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

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

Fetch还有可选的第二个参数,可以用来定制HTTP请求一些参数。你可以指定header参数,或是指定使用POST方法,又或是提交数据等等:

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

译注:如果你的服务器无法识别上面POST的数据格式,那么可以尝试传统的form格式,示例如下:

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: 'key1=value1&key2=value2'
})

可以参考Fetch请求文档来查看所有可用的参数。

处理服务器的响应数据

上面的例子演示了如何发起请求。很多情况下,你还需要处理服务器回复的数据。

网络请求天然是一种异步操作(译注:同样的还有asyncstorage,请不要再问怎样把异步变成同步!无论在语法层面怎么折腾,它们的异步本质是无法变更的。异步的意思是你应该趁这个时间去做点别的事情,比如显示loading,而不是让界面卡住傻等)。Fetch 方法会返回一个Promise,这种模式可以简化异步风格的代码(译注:同样的,如果你不了解promise,建议使用搜索引擎补课):

  getMoviesFromApiAsync() {
    return fetch('http://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('http://facebook.github.io/react-native/movies.json');
      let responseJson = await response.json();
      return responseJson.movies;
    } catch(error) {
      console.error(error);
    }
  }

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

默认情况下,iOS会阻止所有非HTTPS的请求。如果你请求的接口是http协议,那么首先需要添加一个App Transport Securty的例外,或者干脆完全禁用ATS,详细可参考这篇帖子

使用其他的网络库

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);
};
时间: 2024-09-17 12:52:24

React Native网络请求的相关文章

从零学React Native之14 网络请求

通过HTTP或者HTTPS协议与网络侧服务器交换数据是移动应用中常见的通信方式. node-fetch是RN推荐的请求方式. React Native框架在初始化项目时, 引入了node-fetch包 (因为npm3把依赖全部摊平了,node-fetch就在node_modules目录下) 下面就是项目中引入的node-fetch的源码: 联网 联网分为发送请求和接受响应两步.分开来分析下. 发送请求 发送http/https gong细分一下共有6个步骤 1. 确定并准备请求地址与协议 2.

[React Native]获取网络状态

使用React Native,可以使用NetInfo API获取手机当前的各个网络状态. componentWillMount() { NetInfo.fetch().done((status)=> { console.log('Status:'+status); }); } 获取网络状态是异步的,上面使用了Promise机制. Android端网络状态 请求网络信息需要先在应用的AndroidManifest.xml文件中添加如下权限字段,申请相关权限: <uses-permission a

React Native项目实战之fetch请求

fetch简介 在 AJAX 时代,进行请求 API 等网络请求都是通过XMLHttpRequest 或者封装后的框架进行网络请求.而在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架. fetch相比XMLHttpRequest,提供更加强大.高效的网络请求方式,所以在 Hybrid App 开发模式中,大量的用到了fetch框架作为网络请求. fetch在浏览器中使用 在 Chrome 浏览器中已经全局支持了 fetch 函数,打开调试工具,在 Console 中可以进

React Native在特赞的应用与实践

作者:苑永志 作者介绍:现任特赞大前端负责人.技术涉猎比较广泛,曾在大麦网担任高级Java研发工程师:后以前端工程师身份加入特赞,基于React技术栈构建开发前端项目,并使用React Native开发特赞移动APP:目前正在使用Node.js开发和维护特赞服务网关,希望Node.js能够在更轻量级的微服务架构中发挥重要作用. 一.需求缘起 特赞是在2016年末才开始着手APP开发的.记得那是距离过年还有一个月的时候,产品突然提出一个需求:咱们做一个iOS应用吧,快过年了,给设计师一个新年礼物.

如何用 React Native 创建一个iOS APP?

诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等. React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验.React Native 把重点放在所有开发人员关心的平台的开发效率上--开发者只需学习一种语言就

React native for Android 初步实践

Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (react-native)真正成为跨平台的客户端框架.本篇主要是从分析代码入手,探讨一下RN在安卓平台上是如何构建一套JS的运行框架. 一. 整体架构 RN 这套框架让 JS开发者可以大部分使用JS代码就可以构建一个跨平台APP. Facebook官方说法是learn once, run everywhere, 即在Android . IOS.

如何用 React Native 创建一个iOS APP?(二)

我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRegistry.registerComponent( 上述是定义应用程序的入口点.这也是 JavaScript 代码开始执行的地方.  这是一个本地用户界面反应的基本结构.我们定义的每个视图将遵循相同的基本结构. 在本教程中,我们将创建一个既可以浏览书籍又能知道书籍介绍比如作者.标题或关于书籍的简介.你还可以通

看沃尔玛如何玩转 React Native

本文讲的是看沃尔玛如何玩转 React Native, 在沃尔玛,顾客总是第一位的,所以我们一直在寻找方法去改善我们给客户提供的购物体验.目前沃尔玛 app 有许多嵌入式的 Web 网页,我们发现这样的实现低于我们和我们的客户对这个应用程序的要求.即使在高端机上,这种混合 Web 视图实现的性能也不是很好,并且缺少了原生应用的感觉.不止如此,通过 Web 来访问非常依赖网络(我们使用服务器端呈现 Web),网络不好的用户会有不好的体验.因此,我们在思考:"有没有一种方法,能让我们修改或者替换现在

React Native运行原理解析

Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (react-native)真正成为跨平台的客户端框架.本篇主要是从分析代码入手,探讨一下RN在安卓平台上是如何构建一套JS的运行框架. 一. 整体架构 RN 这套框架让 JS开发者可以大部分使用JS代码就可以构建一个跨平台APP. Facebook官方说法是learn once, run everywhere, 即在Android . IOS.