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);
};
相关推荐
LFly_ice2 小时前
学习React-10-useTransition
前端·学习·react.js
知识分享小能手2 小时前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
wordbaby2 小时前
Hooks的革命:让React的非UI逻辑也能像UI组件一样自由复用和组合
前端·react.js
拜无忧3 小时前
【教程】Vue中级转React终极指南-理解Vue和React的差异
前端·vue.js·react.js
NeverSettle_3 小时前
2025年React 18 + React 19源码深度解析
javascript·react.js
卸任4 小时前
Electron运行环境判断(是否在虚拟机中)
前端·react.js·electron
郑陈皮4 小时前
qiankun vs MicroApp 微前端框架对比分析
前端·前端框架
EndingCoder4 小时前
Electron 高级 UI:集成 React 或 Vue.js
react.js·ui·electron·前端框架
江城开朗的豌豆4 小时前
前端数据流之争:React与Vue的"内心戏"大揭秘
前端·javascript·react.js
江城开朗的豌豆4 小时前
前端路由暗战:React与Vue的导航哲学对决
前端·javascript·react.js