React Native 之 接口请求(八)

React Native 提供了和 web 标准一致的Fetch API,用于满足开发者访问网络的需求。如果你之前使用过XMLHttpRequest(即俗称的 ajax)或是其他的网络 API,那么 Fetch 用起来将会相当容易上手。

发起请求API(fetch)

javascript 复制代码
fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});
//Content-Type有很多种,对应 body 的格式也有区别。到底应该采用什么样的Content-Type取决于服务器端,所以请和服务器端的开发人员沟通确定清楚。
//除了常用的上面一种,还有下面传统的网页表单
//headers: {
//    'Content-Type': 'application/x-www-form-urlencoded',
//  },

处理服务器的响应数据

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

javascript 复制代码
// 注意这个方法前面有async关键字
async function 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);
  }
}

默认情况下,iOS 会阻止所有 http 的请求,以督促开发者使用 https。如果你仍然需要使用 http 协议,那么首先需要添加一个 App Transport Security 的例外。从 Android9 开始,也会默认阻止 http 请求。

使用其他的网络库

React Native 中已经内置了XMLHttpRequest API(也就是俗称的 ajax)。一些基于 XMLHttpRequest 封装的第三方库也可以使用,例如frisbee 或是axios等。jQuery不支持,因为 jQuery 中还使用了很多浏览器中才有而 RN 中没有的东西。

WebSocket 支持

javascript 复制代码
const 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);
};
相关推荐
江城开朗的豌豆5 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
前端人类学5 小时前
React框架详解:从入门到精通(详细版)
react.js·redux
江城开朗的豌豆5 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
艾小码6 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
小刘大王6 小时前
while循环与死循环
架构·前端框架
bug_kada6 小时前
详解 React useCallback & useMemo
前端·react.js
断竿散人6 小时前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
用户784721509916 小时前
Zustand源码解读(更新中)
react.js
天蓝色的鱼鱼20 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
XiaoSong1 天前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js