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);
};
相关推荐
wen's7 分钟前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
样子20183 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
Jackson_Mseven6 小时前
面试官:useEffect 为什么总背刺?我:闭包、ref 和依赖数组的三角恋
前端·react.js·面试
weixin_404611349 小时前
关于微前端框架micro,子应用设置--el-primary-color失效的问题
前端框架
前端小盆友9 小时前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
前端·gpt·react.js
OLong10 小时前
2025年最强React插件,支持大量快捷操作
前端·react.js·visual studio code
朝阳3910 小时前
ReactNative【实战系列教程】我的小红书 3 -- 自定义底栏Tab导航(含图片选择 expo-image-picker 的使用)
react native
摸鱼仙人~10 小时前
重塑智能体决策路径:深入理解 ReAct 框架
前端·react.js·前端框架
namehu10 小时前
浏览器中的扫码枪:从需求到踩坑再到优雅解决
前端·react.js
杨进军10 小时前
React 使用 MessageChannel 实现异步更新
react.js