使用 Fetch 和 Axios 响应原生 API 调用

使用 Fetch 和 Axios 响应原生 API 调用

在本教程中，我们将实现最流行的 API 调用方式到 React Native 应用程序中。

我们将构建一个项目，并随之学习不同的 API 调用方法，包括 1) 拿来（） 方法和2） 爱讯 React-Native 提供的方法。我们还将看到这些方法的不同配置和属性使用 拿来 和 axios 在反应本机应用程序中。

本教程的完整源代码可在此处获得 - RN-API__方法

什么是 React-Native？

TLDR； — React Native (RN) 创建跨平台应用程序，比 Cordova / Ionic 制作的 web 视图应用程序更“原生”。但是 React Native 尚未发布框架的稳定 (1.0.0_) 版本。

React Native 是一个 JavaScript 框架，用于编写原生渲染的移动应用程序。它基于 React，Facebook 用于构建用户界面的 JavaScript 库，但它不是针对浏览器，而是针对移动平台。因为您编写的大部分代码都可以在平台之间共享，所以 React Native 可以轻松同时为 Android 和 iOS 进行开发。

React Native 应用程序使用真实的移动 UI 组件进行渲染， 不是 网络视图，并且看起来和感觉就像任何其他本机移动应用程序。 React Native 还公开了用于平台 API 的 JavaScript 接口，因此您的 React Native 应用程序可以访问手机摄像头或用户位置等平台功能。 Facebook , 帕兰提尔 , 任务兔 等已经在面向用户的应用程序的生产中使用它。

为什么我们需要 API？

大多数 Web 和移动应用程序将数据存储在云中，并与服务进行通信。例如，获取您当地当前天气的服务，或根据搜索词返回 GIF 列表的服务。

数据库和 Web 服务具有称为 API（应用程序编程接口）的东西，应用程序可以使用它通过 URL 进行通信。换句话说，API 允许应用程序从数据库或 Web 服务中检索或发送数据。

应用程序使用 HTTP 请求（例如 GET、POST 和 PUT）与 API 通信。

React Native 和 API 调用

许多移动应用程序需要从远程 URL 加载资源。您可能想要向 REST API 发出 POST 请求，或者您可能需要从另一台服务器获取一大块静态内容。

帖子结构

我们将逐步探索API调用的所有方法。这是我对博客的分解

脚步

1. 创建一个简单的 React Native 应用程序
2. 安装包 axios .
3. 利用 拿来 和 axios API 调用的方法。

让我们潜入水中！

第 1 步 - 创建一个基本的 React Native 应用程序

首先，确保您具备创建 react-native 应用程序的所有先决条件 官方文档 .

在这篇文章的时候，我有 React-Native 版本 0.69.3

创建一个空白的 react-native 应用程序（替换 APICALLS 使用您自己的应用名称）

 $ 反应原生初始化 APICALLS

这将创建一个基本的 React-native 应用程序，您可以在设备或模拟器中运行该应用程序。让我们在 iOS 中使用

 $ react-native run-ios

您将在设备/模拟器上看到默认的开始屏幕。

Default UI

第 2 步 — 在 React Native App 中安装 Axios

您可以使用以下命令安装 Axios ：

纱线添加axios

或者使用 npm

npm i axios — 保存

现在我的 应用程序.js 结构看起来像：-

我已经使用 Hooks 并在这个应用程序中实现了功能组件的概念 ApiContainer.js

在这个 ApiContainer.js 我已经在文件顶部导入了 Axios 库。

 从'axios'导入axios；

让我们开始并开始在我们很酷的 React-Native 应用程序中实现这些方法，但在此之前让我们为 UI 目的制作一些按钮，以便我们可以单击这些按钮来获取响应并显示结果。我稍后会在博客中提供完整的 ApiContainer.js 代码。现在让我们了解 Fetch 和 Axios 方法。

第 2 步 — 用于 API 调用的 Fetch vs Axios

我们制作了如下所示的 UI，以便从 2 个不同的按钮调用这 2 个方法。 [代码稍后在博客中]

查看结果： -

Home Page

Clicking using Fetch

Data view

获取 API

React Native 提供了 获取 API 满足您的网络需求。如果您使用过 Fetch，您会觉得很熟悉 XMLHttpRequest 或之前的其他网络 API。

发出请求

为了从任意 URL 获取内容，您可以将 URL 传递给 fetch：

 fetch('你要从中获取数据的 URL');

Fetch 还接受一个可选的第二个参数，允许您自定义 HTTP 请求。您可能想要指定其他标头，或发出 POST 请求：

 fetch('您要从中获取数据的 URL', {  
 方法：'POST'，  
 标题：{  
 接受：'应用程序/json'，  
 '内容类型'：'应用程序/json'，  
 },  
 正文： JSON.stringify({  
 firstParam: '你的价值',  
 secondParam: '你的其他值',  
 }),  
 });

联网本质上是一种异步操作。 Fetch 方法将返回一个 承诺 这使得编写以异步方式工作的代码变得简单：

 功能 **getMoviesFromApiAsync** () {  
 return fetch('你要从中获取数据的 URL')  
 .then((响应) => response.json())  
 .then((responseJson) => {  
 返回 responseJson.movi​​es；  
 })  
 .catch((错误) => {  
 控制台.错误（错误）；  
 });  
 }

使用 异步 / 等待 React Native 应用程序中的语法：

 异步函数 getMoviesFromApi() {  
 尝试 {  
 让响应=等待获取（  
 '您要从中获取数据的 URL',  
 );  
 让 responseJson = 等待 response.json();  
 console.log(responseJSon);  
 返回响应Json；  
 } 捕捉（错误）{  
 控制台.错误（错误）；  
 }  
 }

不要忘记捕获可能引发的任何错误 拿来 ，否则，它们将被无声地丢弃。

获取方法的代码视图：-

在获取请求中添加授权标头

有时我们需要授权标头，如果应用程序位于基于登录的系统之后。

要在 fetch API 中添加授权标头，我们必须添加 headers 属性并将其作为第二个参数传递给 fetch API。

 获取（'网址'，{  
 方法：'GET'，  
 标头：新标头（{  
 '授权'： `不记名${token}` ,  
         '内容类型'：'应用程序/json'，  
 }),  
 });

Axios 库

其他 API调用的方法是Axios。 爱讯 是一个非常流行的 HTTP 客户端，它允许我们从浏览器发出不同的请求（GET、POST、PUT 和 DELETE）。

Axios 定义了不同的内置方法来调用每种方法类型。以下是这些内置方法：-

1. POST 方法 → 使用 。邮政（） 方法。它以 url、data 和 header 作为参数。
2. GET 方法 → 使用 。得到（） 方法。它以 url 和 header 作为参数。
3. PUT 方法 → 使用 。放（） 方法。它以 url、data 和 header 作为参数。
4. DELETE 方法 → 使用 。删除（） 方法。它以 url 和 header 作为参数。

现在，我们将展示使用 Axios 和 React Native 向 API 发出请求，在我们的 React 应用程序中使用返回的数据。

Axios 方法的代码视图：-

APIContainer.js 的代码视图

APIStyles.js 的代码视图

在上面的要点中，你可以看到我使用了 设置超时 加载数据的方法——当它加载时，我将展示一个加载器。

在axios请求中添加授权头

在 axios 中添加 Authorization 标头 得到（） 方法，我们只需要传递第二个参数作为标题。下面是代码，可以用来在axios中添加授权头。

 axios.get(  
 '网址',  
 {  
 标题：{  
 '内容类型'：'应用程序/json'，  
 Authorization: `Bearer ${token}`, // auth token  
 },  
 }  
 ).then((响应) => {  
 console.log(response) // 处理响应  
 })

Axios 与 Fetch 比较：

Axios 和 fetch 各有各的优点，但我将解释它们各自的优点。

Axios 的优点超过 fetch

1. 我们不必处理请求和响应标头，因为在获取每种方法类型时我们必须设置标头值。
2. 响应是可读格式而不是 fetch 我们必须使用 json() 或其他方法使其成为可读格式。
3. 使用 axios 调用 API 更容易，因为我们只需要调用 post()、get()、delete() 或 put() 方法，而不是在 fetch 中我们必须在 fetch API 本身中传递参数。

通过 axios 获取专业人士

1. Fetch 是内置的 JavaScript API，比 Axios（第 3 方包）更标准
2. 我们不必从任何包中导入 fetch，而是需要为 axios 包导入 axios。

哪个更好 - Axios 或 Fetch ？

关于 React Native， ** 爱讯** 将是我的首选，因为它更易于使用。 Axios 已经自行处理了一些极端情况，因为它是由一些专家开发人员通过 fetch API 开发的。

本教程的完整源代码可在此处获得 - RN-API__方法 .

结论

在这篇文章中，我们学习了如何使用 REST API 来实现 拿来（） 和 axios 我们的 React 本机应用程序中的方法。我们还学习了如何处理来自这些方法的响应并在应用程序中使用它们的数据。

我们还看到了如何从 Fetch API 发送授权标头以及如何在 React Native 中从 Axios 库发送授权标头。

本教程的完整源代码可在此处获得 - RN-API__方法 .

下一步

如果您喜欢这个博客，您还会发现以下 React Native 博客很有趣且很有帮助。欢迎在评论区提出任何问题

• 火力基地—— 集成 Firebase | 分析 | 推送通知 | Firebase CRUD
• 如何在 React Native 中使用 — 地理位置 | 生命周期钩子 | 图像选择器 | Redux 实现 | 进行 API 调用 | 导航 | 翻译 | 条码和二维码扫描 | 发送和阅读短信 | 谷歌愿景 | 拉动刷新
• 付款— 苹果支付 | 条纹支付
• 验证 - 谷歌登录 | Facebook登入 | 电话验证 | 推特登录
• 在 React Native 中创建 Instagram / Whatsapp 故事功能
• React Native 生命周期钩子 | 实施 Redux | Redux 的异步操作
• 在 React Native 中创建很棒的应用程序 使用完整的应用程序

React Native 完整应用

如果你需要一个基础来启动你的下一个 React Native 应用程序，你可以使用 React Native 完整应用

React Native Full App by Enappd

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/20660/07470700