在 React 中单击时发出 Http 请求

作者

在 React 中单击时发出 Http 请求

Make an Http request on click in React

在 React 中单击时发出 http 请求：

  1. onClick在元素上设置道具。
  2. 每次单击该元素时，都会发出 HTTP 请求。
  3. 更新状态变量并呈现数据。
如果您使用axios，向下滚动到下一个代码片段。
应用程序.js
import {useState} from 'react';

const App = () => {
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [err, setErr] = useState('');

  const handleClick = async () => {
    setIsLoading(true);
    try {
      const response = await fetch('https://reqres.in/api/users', {
        method: 'POST',
        body: JSON.stringify({
          name: 'John Smith',
          job: 'manager',
        }),
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
      });

      if (!response.ok) {
        throw new Error(`Error! status: ${response.status}`);
      }

      const result = await response.json();

      console.log('result is: ', JSON.stringify(result, null, 4));

      setData(result);
    } catch (err) {
      setErr(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  console.log(data);

  return (
    <div>
      {err && <h2>{err}</h2>}

      <button onClick={handleClick}>Make request</button>

      {isLoading && <h2>Loading...</h2>}

      {data && (
        <div>
          <h2>Name: {data.name}</h2>
          <h2>Job: {data.job}</h2>
        </div>
      )}
    </div>
  );
};

export default App;

单击时做出反应

如果您需要在 React 中单击按钮时发出 HTTPGET请求，请查看我的另一篇文章 –
Fetch data on Button click in React。

该示例显示了如何在 React 中单击按钮时发出 HTTP Post 请求。

我们将onClickprop 设置在按钮元素上，因此每次单击按钮时，handleClick都会调用该函数。

handleClick我们将函数标记为async，因此我们可以使用
await关键字在其中等待 Promises。

在handleClick函数中，我们等待 POST http 请求完成并更新状态变量。

此示例使用本机fetchAPI，但如果您也使用axios包，则该概念也适用。

axios以下是如何使用包在单击按钮时发出 http POST 请求
。

如果您决定使用axios，请确保您已通过运行安装包npm install axios。

应用程序.js
import {useState} from 'react';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [err, setErr] = useState('');

  const handleClick = async () => {
    setIsLoading(true);
    try {
      const {data} = await axios.post(
        'https://reqres.in/api/users',
        {name: 'John Smith', job: 'manager'},
        {
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
          },
        },
      );

      console.log(JSON.stringify(data, null, 4));

      setData(data);
    } catch (err) {
      setErr(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  console.log(data);

  return (
    <div>
      {err && <h2>{err}</h2>}

      <button onClick={handleClick}>Make request</button>

      {isLoading && <h2>Loading...</h2>}

      {data && (
        <div>
          <h2>Name: {data.name}</h2>
          <h2>Job: {data.job}</h2>
        </div>
      )}
    </div>
  );
};

export default App;

单击时做出反应

该示例展示了如何在点击时使用 发出 Http POST 请求axios。

如果使用axios，请确保通过npm install axios在项目的根目录中运行来安装包。

使用axios包时的语法更简洁，我们需要处理的实现细节也更少，但概念是一样的。

我们必须onClick在按钮元素上设置属性，并在每次单击按钮时发出 HTTP 请求。

–

发表评论