在 React 中使用 API 获取数据的不同方法

在开发 React 应用时，通常需要与服务端进行数据交互。这个过程通常通过调用 API 来实现。在本文中，我们将介绍在 React 中使用 API 获取数据的不同方法。

直接使用 fetch

使用 fetch 方法是最基本的获取数据的方法，它是原生 JavaScript 提供的 API。它需要传入一个 URL，并且可以传入一个配置对象。在获取数据后，可以使用 then 方法处理响应：

fetch('https://example.com/api/data')
  .then(response => response.json())
  .then(data => console.log(data))

在上面的示例中，我们使用 fetch 方法获取了一个 URL，然后使用 then 方法解析响应，把响应转换成 JSON 格式，并打印到控制台中。

使用 Axios

Axios 是一个流行的 JavaScript 库，它可以让你更轻松地处理 HTTP 请求。它支持 Promise API，可以简化代码，让我们更容易处理响应。

要使用 Axios，首先需要安装它：

npm install axios

然后我们可以在组件中使用它：

import axios from 'axios';

axios.get('https://example.com/api/data')
  .then(response => console.log(response.data))

在上面的示例中，我们使用 axios.get 方法获取了一个 URL，然后使用 then 方法访问响应数据。

使用 react-query

react-query 是一个真正的数据查询库，可以让你从服务端获取数据并在应用中缓存它们。它可以让我们更好地处理异步数据，并且内置了一些有用的特性，如自动重试和缓存管理。

要使用 react-query，首先需要安装它：

npm install react-query

必须包裹在 QueryClientProvider 组件中：

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
import { ReactQueryDevtools } from 'react-query/devtools'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
      <ReactQueryDevtools initialIsOpen />
    </QueryClientProvider>
  )
}

function Example() {
  const { isLoading, error, data } = useQuery('repoData', () =>
    fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
      res.json()
    )
  )

  if (isLoading) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
    </div>
  )
}

在上面的示例中，我们通过 useQuery 组件获取了一个 URL，然后使用 isLoading 和 error 状态来展示加载和错误信息。当数据加载完成时，我们可以渲染它来显示到用户。

结论

在 React 应用中使用 API 进行数据交互是一项很普遍的任务。在本文中，我们介绍了三种不同的方法，包括原生的 fetch 方法、Axios 库和 react-query 库。每种方法都有其优缺点，需要根据具体需求来选择使用。