如何在 React JS 中使用 HTTP GET 方法

在这篇文章中,我们将学习 React JS 中的 HTTP Get 方法。基本上,我们通常需要使用 HTTP 请求来获取和使用 API,因此在许多 React 应用程序中,我们使用这些 HTTP 方法从 API 获取数据。所以了解HTTP方法是很有必要的。五种常见的 HTTP 请求方法是 GET、  PUT、  POST、 PATCH和 DELETE。这些方法允许我们执行标准的 CRUD 操作。

今天我们将了解react JS中的HTTP Get方法,所以让我们开始吧。

什么是 HTTP 获取方法?

Getmethod 是一种 HTTP 请求方法,旨在从服务器(这里特指 API)获取资源。这是帮助我们从服务器获取数据的基本方法。

我们基本上可以使用两种方法来处理 get 方法:(1)fetch,(2)axios。

React JS 中的 HTTP 获取方法:Fetch()

fetch() 方法是 ReactJS 中常用的方法之一。在 React 中, fetch 方法需要一个强制参数,这里是一个 URL,或者一个 API URL。另外,它的默认值是Get,所以我们不需要手动提及它。请记住,您可以直接使用此 fetch 方法,无需安装任何其他包。

Fetch 承诺提供数据,以便我们可以处理 then() 方法和 catch() 方法来处理数据。这里response.json()用于将原始数据转换为JSON格式的数据。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // Do something with the data
  })
  .catch(error => {
    // Handle the error
  });

复制

这是 fetch 方法的一个基本示例,正如您所看到的,我们在 useEffect 中调用了 API,其目的是在应用程序渲染之前调用 API。此外,我们在每次成功调用后使用 useState 来存储数据。为了存储 API 调用的数据,我们最好使用 useState 挂钩。

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts')
         .then((res) => res.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

   return (
      // ... consume here
   );
};

复制

React JS 中的 HTTP 获取方法:axios()

Axios 是另一种使用get方法的方式,它看起来比 fetch() 方法更干净,对吧?  Axios 是一个基于 Promise 的 HTTP 客户端库,可以轻松地将异步 HTTP 请求发送到 REST 端点。

axios是一个外部库,也可以说是外部包。因此,您需要在终端或 cmd 中使用这行代码将其安装到 React 应用程序中。

npm install axios

要在 axios 中使用 get 方法,我们使用axios.get()带有强制参数(URL)的方法。axios 与 fetch 有很大不同,因为 axios 提供了比 fetch 方法更强大、更灵活的 API。

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    // Do something with the data
  })
  .catch(error => {
    // Handle the error
  });

复制

React JS 中的 HTTP Get 方法:功能组件和类组件

get在功能组件中使用方法,理想情况下,我们应该在 useEffect 挂钩中调用 API。

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts')
         .then((res) => res.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

   return (
      // ... consume here
   );
};

复制

另外,为了get在类组件中使用方法,componentDidMount()最好在方法中进行 API 调用。类组件中的 Fetch 和 axios 方法将保持相同。

import React, { Component } from 'react';

class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }

   componentDidMount() {
      fetch('https://jsonplaceholder.typicode.com/posts')
         .then((response) => response.json())
         .then((data) => this.setState({ posts: data }))
         .catch((error) => console.log(error));
   }

   render() {
      const { posts } = this.state;

      return (
         // ... 
      );
   }
}

复制

React JS 中的 HTTP Get 方法:Async/await

async/await 方法并不是从 API 获取数据的不同方式,但你可以说它是使用 fetch 和 axios 方法的方式。以下是基本示例:

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        setData(data);
      } catch (error) {
        console.error(error);
      }
    }
    fetchData();
  }, []);

  return (
    <div>
      {data ? <p>{data.example}</p> : <p>Loading...</p>}
    </div>
  );
}

export default ExampleComponent;

复制

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (error) {
        console.error(error);
      }
    }
    fetchData();
  }, []);

  return (
    <div>
      {data ? <p>{data.example}</p> : <p>Loading...</p>}
    </div>
  );
}

export default ExampleComponent;

复制

如何在 React JS 中使用 HTTP GET 方法

给TA打赏
共{{data.count}}人
人已打赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索