如何在 ReactJS 中使用异步等待从 API 获取数据？

在本文中，我们将使用 ReactJS 向您想要的任何 API 发出 API 请求，并使用异步等待获取数据。这里我们使用了一个叫做 Axios 的东西，它是 ReactJS 中的一个库。

API： API 基本上是一种以 JSON（JavaScript 对象表示法）和 XML（可扩展标记语言）格式存储数据的应用程序。它使任何设备都可以相互通信。

异步等待：异步确保函数返回一个承诺并将非承诺包装在其中。还有另一个词 Await，它只在 async函数内部起作用。

等待语法：

const Value = await promise;

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到它：
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，安装必需的模块使用以下命令：
```
npm install axios
```

项目结构：它将如下所示。

项目结构

例子：

App.js

import React, { useState, useEffect } from 'react'
import axios from 'axios';
  
function App() {
  
    const [loading, setLoading] = useState(false);
    const [posts, setPosts] = useState([]);
  
    useEffect(() => {
        const loadPost = async () => {
  
            // Till the data is fetch using API 
            // the Loading page will show.
            setLoading(true);
  
            // Await make wait until that 
            // promise settles and return its reult
            const response = await axios.get(
            "https://jsonplaceholder.typicode.com/posts/");
  
            // After fetching data stored it in posts state.
            setPosts(response.data);
  
            // Closed the loading page
            setLoading(false);
        }
  
        // Call the function
        loadPost();
    }, []);
  
    return (
        <>
            
                {loading ? (
                    Loading...) :
                    (posts.map((item) =>
                        // Presently we only fetch 
                        // title from the API 
                        {item.title})
                    )
                }
            
        
    );
}
  
export default App;

注意：作为示例，我们将使用 API https://jsonplaceholder.typicode.com/posts/ ，它会为我们提供随机数据。在这里，我们的目标是查看这些数据中呈现的内容。您可以用您的 API 替换它并在 div 应用程序中进行更改。如果我们在 postman 上运行https://jsonplaceholder.typicode.com/posts/ API，它将以 JSON 格式显示数据，如下所示：

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：