理解 React Native 中的 AJAX 请求

曾经，大多数 Web 应用程序通过用户操作刷新整个网页以与 Web 服务器通信。 后来，AJAX（异步 JavaScript 和 XML）概念通过提供一种在后台与 Web 服务器通信的方式使 Web 应用程序内容动态化，而无需重新加载网页。

AJAX 随后成为 W3C 批准的 Web 标准。 因此，开发人员现在可以在任何标准浏览器中使用 AJAX API，通过 HTTP 协议获取网页中的 JSON、XML、HTML 或原始字符串内容。

React Native 框架提供了一个跨平台的应用程序开发解决方案，其中包含嵌入式 JavaScript 引擎 (Hermes)、特定于平台的 UI 元素包装器和 React。 React Native 框架使用底层平台特定的网络 API 为 AJAX 浏览器 API 实现 polyfill，因此我们可以使用标准 JavaScript Web API 在 React Native 中发送 AJAX 请求。

在本教程中，我将通过实际示例演示在您的 React Native 应用程序中处理 AJAX 请求的各种方法。 此外，我将解释如何以用户友好的方式处理 AJAX 错误和网络延迟。

跳跃前进：

• 在 React Native 中发出 AJAX 请求的方法

  • 内置的 Fetch API

  • 内置 XMLHttpRequest API

  • 爱讯

  • 替代 AJAX 库

  • 带有缓存库的 AJAX

• 一个 React Native AJAX 教程六种方式

  • 创建 RESTful 后端

  • 创建应用程序前端

  • 使用获取 API

  • 使用 Axios

  • 使用替代 AJAX 库 SuperAgent 和 Wretch

  • 使用 TanStack 查询

• 处理 AJAX 错误

• Fetch vs. Axios vs. 其他 HTTP 客户端 vs. TanStack Query（汇总表）

在 React Native 中发出 AJAX 请求的方法

让我们从确定在 React Native 中发出 AJAX 请求的可能方式开始——然后，我们可以通过示例对它们进行实际测试。 我们可以调用这些 HTTP 客户端库或 API，因为它们都帮助我们使用 HTTP 协议与服务器进行通信。

我们可以使用以下内置和基于库的方式来发出 AJAX 请求：

内置的 Fetch API

2015 年， Fetch API 被引入，作为著名的传统 XMLHttpRequest API 的现代继承者。 Fetch 提供了一个基于 Promise 的现代接口，用于发送具有许多 HTTP 配置的 AJAX 请求，例如 HTTP 方法、标头、有效负载等。您不需要第三方 polyfill 即可在 React Native 中使用 Fetch，因为它是一个预先React Native 框架中包含的功能。

内置 XMLHttpRequest API

XMLHttpRequest （又名 XHR）是在 Fetch API 之前用于发送 AJAX 请求的最古老的标准 API。 XHR API 为 AJAX 编程提供了一种传统的基于事件的方法。 React Native 提供了这个 API 和 Fetch API 来满足网络需求。 现代开发人员现在不尝试直接使用 XHR API，这主要归功于 Fetch 和其他开发人员友好的 AJAX 库，如 Axios。

爱讯

Axios 是一个流行的开源 HTTP 客户端库，适用于浏览器环境（包括 IE 11）和 Node.js。 现在大多数前端开发人员 选择 Axios 是因为它最小的、基于 Promise 的 API、自动请求/响应转换和全局配置支持。

替代 AJAX 库

虽然 Axios 是一个流行的 HTTP 客户端库，但 JavaScript 库生态系统有数百种开源替代方案。 这些替代品充当包装 XMLHttpRequest对象或 Fetch功能，就像 Axios 一样。

。 Wretch 和 SuperAgent 库是 Axios 的流行替代品

带有缓存库的 AJAX

大多数 Web 应用程序通过与 RESTful Web API 通信来执行 CRUD 操作，RESTful Web API 使用 AJAX 概念与其后端 Web API 通信。 开发人员经常需要编写额外的代码来提高前端 CRUD 操作的可用性。

例如，我们可以通过在前端缓存数据来更快地在 UI 上加载频繁使用的数据，并通过对网络调用进行重复数据处理来最大限度地减少带宽使用。 TanStack Query（以前称为 React Query）和类似 SWR 的缓存库可帮助开发人员通过编写更少的代码以用户友好的方式高效地发出 AJAX 请求。

一个 React Native AJAX 教程六种方式

我们将创建一个列出书籍详细信息的全栈移动应用程序。 首先，让我们创建一个简单的 RESTful API，然后我们可以使用上面的各种内置 AJAX API 和库来使用它，以了解如何在 React Native 中发出 AJAX 请求。

创建 RESTful 后端

使用以下命令创建一个新目录和 Node.js 项目：

mkdir bookstore-backend
cd bookstore-backend
​
npm init
# --- or ---
yarn init

添加 Express.js 库以开始创建 RESTful API：

npm install express
# --- or ---
yarn add express

创建一个名为的新文件 server.js，并添加以下代码：

const express = require('express');
const app = express();
const books = [
    {
        id: 100,
        title: 'Golang experts',
        author: 'John Stack',
        price: 200
    },
    {
        id: 101,
        title: 'C++ for beginners',
        author: 'John Doe',
        price: 250
    },
    {
        id: 102,
        title: 'Flutter development',
        author: 'Steven Doe',
        price: 350
    },
    {
        id: 103,
        title: 'JavaScript internals',
        author: 'John Stack',
        price: 300
    }
];
​
const port = 5000;
​
app.get('/books', (req, res) => {
  res.json(books);
});
​
app.listen(port, () => {
    console.log(`Bookstore API is running at port ${port}`);
});

在这里，我们通过 GET /books端点。 使用以下命令启动 RESTful API 服务器：

node server.js

通过导航到测试应用后端 http://localhost:5000/books从您的浏览器或通过 curl命令。 您将获得作为 JSON 数组的图书列表，如下所示：

我们的 Bookstore API 在 Google Chrome 中返回数据

让我们向 GET /books通过创建一个简单的 React Native 书店应用程序来使用上述 API 和库的端点。 您可以让这个服务器实例在后台运行，因为我们在实现 UI 后很快就会需要它。

创建应用程序前端

现在，我们将创建应用程序的 React Native 前端，它将具有最少的错误处理功能和原生加载指示器。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

首先，我们将在客户端使用硬编码的图书列表开发前端，然后我们将修改应用程序的源代码以通过各种 AJAX API 和库从后端获取图书信息。

创建一个新的 React Native 项目：

npx react-native init Bookstore

上面的命令将脚手架中的一个新项目 Bookstore目录。 接下来，在物理设备或模拟器/模拟器上运行应用程序，以确保一切正常：

cd Bookstore
​
npm start
# --- or ---
yarn start
​
npx react-native run-android
# --- or ---
npx react-native run-ios

更换你的 App.js源文件的内容与以下源代码：

import React, { useState, useEffect } from 'react';
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  ActivityIndicator,
} from 'react-native';
​
const BookItem = ({ title, author, price }) => (
  
    
      {title}
      {author}
    
    
      ${price}
    
  
);
​
const BookList = () => {
  const [books, setBooks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
​
  async function getBooks() {
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setBooks([{
        id: 100,
        title: 'Golang experts',
        author: 'John Stack',
        price: 200
    },
    {
        id: 101,
        title: 'C++ for beginners',
        author: 'John Doe',
        price: 250
    }]);
    setLoading(false);
  }
​
  useEffect(() => {
      getBooks();
  }, []);
​
  if(error)
    return Unable to connect to the server.;
​
  if(loading)
      return ;
​
  return (
     }
      keyExtractor={item => item.id}
    />
  );
}
​
const App = () => {
  return (
    
      
    
  );
}
​
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: '10%',
  },
  item: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start',
    backgroundColor: '#eee',
    padding: 12,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  itemLeft: {
    width: '70%'
  },
  itemRight: {
    width: '30%',
  },
  title: {
    fontSize: 22,
    color: '#222',
  },
  author: {
    fontSize: 16,
    color: '#333',
  },
  price: {
    fontSize: 20,
    color: '#333',
    textAlign: 'right'
  },
  errorMsg: {
    color: '#ee8888',
    fontSize: 20,
    padding: 24,
    textAlign: 'center'
  },
});
​
export default App;

渲染一个书单 上面的代码使用内置的React Native FlatList组件 。 如前所述，我们还没有使用任何 AJAX 请求处理程序，但我们使用 getBooks异步函数。 我们最初使用带有硬编码数据的模拟网络操作来实现该应用程序，以便通过修改 getBooks功能而已。

这 getBooks功能模拟网络延迟与 setTimeout函数并在 2000 毫秒后返回硬编码数据。 如果我们调用，UI 会呈现加载动画以指示网络延迟和错误消息 setError(true).

我用了 loading和 error状态变量 App组件，因为我只调用 getBooks功能一次。 但是，如果我们打电话 getBooks在很多地方，我们可以实现一个可重用的自定义 Hook，称为 useBooks以获得更好的代码质量。 中了解更多关于创建自定义 Hooks 的信息 从这篇文章 。

运行上述代码后，您将看到以下结果：

我们的书店应用程序在前端具有硬编码数据

使用获取 API

让我们使用内置的 Fetch API 从后端 Web 服务将书籍加载到 React Native 书店应用程序。 我们不需要导入其他任何东西，因为 fetch函数驻留在类似于浏览器环境的全局脚本范围内。

将以下代码用于现有 getBooks功能：

async function getBooks() {
    try {
      const books = await fetch('http://:5000/books')
                      .then((response) => response.json() );
      setBooks(books);
    }
    catch(err) {
      setError(true);
    }
    finally {
      setLoading(false);
    }
  }

确保您的计算机和移动测试设备使用相同的 WiFi 网络，然后在上面显示的 URL 中输入您计算机的本地 IP 地址 computer_ip. 期待的 fetch函数不直接返回 JSON（它返回一个 Response对象 ），所以我们必须使用 then一次获得承诺，然后解析为接收到的 JSON 内容。

运行应用程序后，您将从后端看到书籍详细信息，如下所示：

我们带有服务器端数据的书店应用程序

fetch接受一个选项对象，允许您设置 HTTP 方法、正文、标头等。查看以下代码片段，它执行 POST要求：

const options = {
  method: 'POST',
  body: JSON.stringify({inStock: false})
};

await fetch('/books', options)
  .then((response) => response.json() );

如果您向多个端点发出 AJAX 请求，您可以使用 Fetch API，如 fetch('/books'), fetch('/books/100')等，通过实现全局 Fetch 拦截器 来配置全局基本 URL 。

早些时候，我们没有机会执行基本的错误处理测试，因为我们没有调用 setError(true)函数调用。 现在，我们可以通过运行前端而不运行服务器来测试它。 您应该会收到一条错误消息，而不是书单，如下所示：

Showing an AJAX error message in our bookstore app

We will discuss other popular AJAX error handling strategies in a separate section.

Using Axios

First, install the Axios package:

npm install axios
# --- or ---
yarn add axios

接下来，导入 axios对象，如下图：

import axios from 'axios';

现在，更新 getBooks使用以下代码函数使用 Axios 发出 AJAX 请求：

async function getBooks() {
    try {
      const { data: books } = await  axios.get('http://:5000/books');
      setBooks(books);
    }
    catch(err) {
      setError(true);
    }
    finally {
      setLoading(false);
    }
  }

Axios 根据 HTTP 响应内容类型转换数据，因此我们不需要像 Fetch API 示例中那样显式请求 JSON。 在这里，我们使用 JavaScript 的 解构 语法来分配 data财产价值为 books瞬间变。

Axios 为我们提供了方便的 HTTP 方法功能。 例如，我们可以制作一个 POST要求如下：

await axios.post('/books/101', {inStock: false});

类似于 GET响应，我们可以直接发布 JSON 内容，而无需使用 JSON.stringify函数，不像 fetch.

如果您向多个端点发出 AJAX 请求，您可以使用 Axios 之类的 axios.get('/books'), axios.patch('/books/100')等，通过更新您的 配置默认值 来使用全局基本 URL 配置。

使用替代 AJAX 库 SuperAgent 和 Wretch

那里有许多 Axios 替代品。 让我们尝试两个流行的 HTTP 客户端库： SuperAgent 和 Wretch 。 安装 SuperAgent 包以开始使用：

npm install superagent
# --- or ---
yarn add superagent

现在，导入 superagentAPI如下：

import superagent from 'superagent';

将以下代码添加到 getBooks完成实现的函数：

async function getBooks() {
    try {
      const { body: books } = await superagent.get('http://:5000/books');
      setBooks(books);
    }
    catch(err) {
      setError(true);
    }
    finally {
      setLoading(false);
    }
 }

SuperAgent 提供了类似于 Axios 的基于 Promise 的 API，因此我们可以使用现代的 await关键字，如上图。 它提供了一个插件系统来扩展库的功能。 例如，我们可以使用 superagent-use插件 来定义一个全局配置和 superagent-prefix为所有请求定义一个基本 URL。

Wretch 是一个包装器 fetch具有比 Fetch 更具可读性的 API。 它消除了内置的过多回调 fetch请求 JSON 数据时的功能。 让我们在我们的应用程序中使用 Wretch！

首先，安装 Wretch 包：

npm install wretch
# --- or ---
yarn add wretch

接下来，使用 wretch中的功能 getBooks函数，如下图：

async function getBooks() {
    try {
      const books = await wretch('http://:5000/books').get().json();
      setBooks(books);
    }
    catch(err) {
      setError(true);
    }
    finally {
      setLoading(false);
    }
  }

如你看到的， wretch试图提供比 fetch具有对开发人员更友好的语法。 这 json函数提供了一个解析为 JSON 内容的承诺——我们可以使用 await以比内置更直观的方式 fetch.

---

来自 LogRocket 的更多精彩文章：

• 不要错过 The Replay 来自 LogRocket 的精选时事通讯

• 了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题

• 使用 React 的 useEffect 优化应用程序的性能

• 之间切换 在多个 Node 版本

• 了解如何 使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri ，一个用于构建二进制文件的新框架

• 比较 NestJS 与 Express.js

---

Wretch 为您提供预先构建的现代 中间件 ，用于请求重复数据删除、缓存、重试和延迟请求。 处理 POSTrequests 和 Axios 一样简单：

await wretch('/books/101').post({inStock: false}).json();

使用 TanStack 查询

以上所有方式都为在 React Native 中处理 AJAX 请求提供了很好的解决方案——我们可以使用它们通过 HTTP 协议将应用程序前端与 RESTful 后端连接起来。 但是一个典型的现代 React Native 应用程序超越了基本的 AJAX 处理，包括缓存、请求重复数据删除、自动重试和各种可用性增强。 一些 AJAX 库（如 Wretch）为其中一些要求提供了现代中间件，但使用专用缓存库可为您带来许多预构建的可用性和性能增强，以处理 AJAX 数据。

您可以将缓存库与首选 AJAX 库集成以提高可用性和性能。 让我们使用 TanStack Query 和 Axios 来更好地处理 AJAX。

确保您已经将 Axios 库安装到您的项目中。 接下来安装 TanStack Query 库，如下图：

npm install @tanstack/react-query
# --- or ---
yarn add @tanstack/react-query

现在，更换你的 App.js带有以下代码的源代码：

import React, { useState } from 'react';
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  ActivityIndicator,
} from 'react-native';
import {
  useQuery,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query';
import axios from 'axios';

const BookItem = ({ title, author, price }) => (
  
    
      {title}
      {author}
    
    
      ${price}
    
  
);

const BookList = () => {
  const [books, setBooks] = useState([]);
  const [loading, setLoading] = useState(true);
  const queryClient = useQueryClient();
  const query = useQuery(['books'], getBooks);

  async function getBooks() {
    const response = await axios.get('http://:5000/books');
    return response.data;
  }

  if(query.isLoading)
    return ;

  if(query.isError)
    return Unable to connect to the server.;

  return (
     }
      keyExtractor={item => item.id}
    />
  );
}

const App = () => {
  const queryClient = new QueryClient();
  return (
    
      
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: '10%',
  },
  item: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start',
    backgroundColor: '#eee',
    padding: 12,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  itemLeft: {
    width: '70%'
  },
  itemRight: {
    width: '30%',
  },
  title: {
    fontSize: 22,
    color: '#222',
  },
  author: {
    fontSize: 16,
    color: '#333',
  },
  price: {
    fontSize: 20,
    color: '#333',
    textAlign: 'right'
  },
  errorMsg: {
    color: '#ee8888',
    fontSize: 20,
    padding: 24,
    textAlign: 'center'
  }
});

export default App;

如您所见，TanStack Query 为您提供数据加载和错误状态，因此您无需定义多个状态变量或自定义 Hook 来实现加载状态和错误消息。 在这里，我们根据 isLoading属性和错误消息根据 isError财产。

TanStack Query 默认实现了查询去重，所以如果你两次使用同一个请求，你的应用只会发出一个 HTTP 请求。 使用两个验证它 BookList组件实例，如下：

您可以找到的调用次数 GET /books通过使用断点或简单的端点 console.log， 如下：

app.get('/books', function (req, res) {
  console.log('Test');
  res.json(books);
});

了解有关缓存库的更多信息并找到满足您需求的首选库 通过本文 。

笔趣阁App，可免费看小说和动漫，小说资源全部限制免费观看！

处理 AJAX 错误

AJAX 请求可能由于网络问题、服务器端故障和 Web 域配置问题而失败。 如果我们不在前端处理此类错误，用户可能会面临非用户友好的应用行为。 因此，在面向 AJAX 的 React Native 应用程序中实现错误处理策略以增强用户友好性总是好的。

开发人员通常使用以下策略之一以用户友好的方式处理 AJAX 错误：

• 通过解释失败原因向用户显示错误消息，就像我们在前面的示例中所做的那样

• 多次自动重试 AJAX 请求，如果仍然失败则显示错误消息

• 为用户提供一种使用按钮手动重试失败请求的方法

• 实现自动重试、开发人员友好的错误消息和手动重试操作

• 当用户在 AJAX 请求传输期间离线后连接到 Internet 时重试

TanStack Query 多次重试失败的请求，直到它从数据提供者函数接收到数据。 Fetch 用户可以使用 fetch-retry包 ，Axios 用户可以使用 axios-retry包 以实现 AJAX 请求的自动重试。

例如，查看以下使用 axios-retry 的代码片段。

import axiosRetry from 'axios-retry';
axiosRetry(axios, {
  retryCondition: () => true,
  retries: 3,
  retryDelay: () => 1000
});

在这里，我们设置了三次重试尝试，每次重试尝试之间有 1000 毫秒的延迟。 将上述代码添加到书店应用程序中，在不运行后端的情况下启动应用程序，让加载动画旋转一秒钟，然后启动 RESTful 服务器。 由于自动重试，您将看到图书列表：

通过重试 AJAX 请求来加载数据

如果我们在 3 秒内没有启动 RESTful 服务器，您将看到错误消息，因为使用上述设置 axios-retry 库不会进行超过 3 次重试：

我们的书店应用在多次重试后显示 AJAX 错误

我们还可以 使用指数退避 通过考虑设备和服务器端资源使用情况， 重试概念来实现重试。 选择一个好的 AJAX 错误处理策略，比如自动重试，以获得更好的应用程序可用性。

您还可以使用以下代码添加手动重试按钮：

import React, { useState, useEffect } from 'react';
import {
  Button,
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  ActivityIndicator,
} from 'react-native';
import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retryCondition: () => true,
  retries: 3,
  retryDelay: () => 1000
});

const BookItem = ({ title, author, price }) => (
  
    
      {title}
      {author}
    
    
      ${price}
    
  
);

const BookList = () => {
  const [books, setBooks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  async function getBooks() {
    try {
      setLoading(true);
      setError(false);
      const { data: books } = await axios.get('http://:5000/books');
      setBooks(books);
    }
    catch(err) {
      setError(true);
    }
    finally {
      setLoading(false);
    }
  }

  useEffect(() => {
      getBooks();
  }, []);

  if(error)
    return (
      
        Unable to connect to the server.
        
           getBooks()} title="Retry">
        
      
    );

  if(loading)
      return ;

  return (
     }
      keyExtractor={item => item.id}
    />
  );
}

const App = () => {
  return (
    
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: '10%',
  },
  item: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start',
    backgroundColor: '#eee',
    padding: 12,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  itemLeft: {
    width: '70%'
  },
  itemRight: {
    width: '30%',
  },
  title: {
    fontSize: 22,
    color: '#222',
  },
  author: {
    fontSize: 16,
    color: '#333',
  },
  price: {
    fontSize: 20,
    color: '#333',
    textAlign: 'right'
  },
  errorMsg: {
    color: '#ee8888',
    fontSize: 20,
    padding: 24,
    textAlign: 'center'
  },
  btnWrapper: {
    paddingLeft: '15%',
    paddingRight: '15%',
    paddingTop: '15%'
  },
});

export default App;

The above code produces a retry button after an AJAX request failure. If the web server works again when you click the Retry button, the book list will work as usual, as shown in the preview below:

手动 重试按钮 书店应用程序中的

Fetch vs. Axios vs. 其他 HTTP 客户端 vs. TanStack Query

现在，我们已经通过内置 API 和各种第三方库向 RESTful Web API 发送 AJAX 请求。 每种方法都具有竞争力，但您打算在下一个 React Native 应用程序中使用哪一种？

在您做出决定之前，值得注意的是 TanStack Query 并不是另一个 HTTP 客户端——它是一个缓存库，您可以将其与任何 HTTP 客户端库一起用于同步您的应用程序前端和 Web 服务。

根据以下比较因素选择一种：

比较因子	拿来	爱讯	其他客户端（SuperAgent、Wretch 等）	TanStack 查询
API 类型	基于承诺的最小	基于承诺的最小	基于承诺的最小/详细、基于遗留事件或基于回调的	OOP详解，基于回调
全局配置支持	不支持作为内置功能，但可以通过创建包装器/拦截器来实现	支持，称为配置默认值	大多数库支持通过创建自定义库实例来设置全局配置	支持，通过 QueryClient 类提供
Hermes 中使用的底层 React Native JavaScript API	拿来	XMLHttpRequest	获取，XMLHttpRequest	取决于 HTTP 客户端
可用性和性能增强：缓存、重复数据删除请求等。	开发人员必须自己实现它们或使用社区库	开发人员必须自己实现它们或使用社区库	开发人员必须自己实现它们或使用社区库。 Wretch 为重复请求、重试、延迟请求和缓存提供官方扩展	默认情况下缓存、缓存操作（用于构建实时 UI）、重复数据删除请求和自动重试。 开发者可以轻松实现焦点重取数据、网络状态变化数据重取等。
扩展 AJAX 请求/响应处理逻辑	可以使用包装器/拦截器	可以使用请求/响应拦截器	大多数库都带有内置的插件系统。 即， Wretch 中间件 ， SuperAgent 插件 等。	发送 AJAX 请求的责任不属于这个库，因为它期望通过 promise 获得数据。 而是扩展您的 AJAX 库。

结论

在本教程中，我们研究了在 React Native 中发送 AJAX 请求的各种方法。 我们根据几个关键的比较因素比较了每种方法。 过去，Web 应用程序使用 AJAX 获取 XML 文档和 HTML 片段以使网页动态化。 Web 和 React Native 移动应用程序通常通过 AJAX 使用基于 RESTful JSON 的 Web API。

可以使用任何首选的文档格式（如 YAML、XML 等）作为 Web 服务的通信消息格式。 但是，如今，JSON 是使用 AJAX 传输数据的行业默认设置。 React Native 开发人员还可以使用 WebSockets 超越 AJAX 的请求-响应模型。

许多开发人员更喜欢 AJAX，因为它具有可读性和对开发人员友好的 RESTful 模型、内置 API 和库可用性以及面向 HTTP 的开发的简易性。 从上述方法中选择一种发送 AJAX 请求的方法，并以用户友好和硬件资源友好的方式处理错误。

LogRocket 主动显示和诊断 React Native 应用程序中最重要的问题

成千上万的工程和产品团队使用 LogRocket 来减少了解其 React Native 应用程序中技术和可用性问题的根本原因所需的时间。 使用 LogRocket，您将减少与客户来回对话的时间，并消除无休止的故障排除过程。 LogRocket 让您可以花更多时间构建新事物，而减少修复错误的时间。