关于react.js:React技巧之发出http请求

原文链接：https://bobbyhadz.com/blog/react-send-request-on-click

作者：Borislav Hadzhiev

注释从这开始~

总览

在 React 中，通过点击事件收回 http 申请：

1. 在元素上设置 onClick 属性。
2. 每当元素被点击时，收回 http 申请。
3. 更新 state 变量，并从新渲染数据。

如果你应用axios，请向下滚动到下一个代码片段。

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;

fetch

上述示例向咱们展现了，在 React 中，如何通过点击按钮发送 HTTP POST 申请。

咱们在 button 元素上设置了 onClick 属性，因而每当按钮被点击时，handleClick函数将会被调用。咱们通过 async 关键字标记了 handleClick 函数，因而咱们能够应用 await 关键字来期待外部的 Promise 返回。

在 handleClick 函数中，咱们期待 POST 申请的实现并更新 state 变量。

该示例应用了原生的 fetch API，但如果你应用 axios 依赖包，这个概念也实用。

axios

上面是如何应用 axios 包在点击按钮时收回 http POST申请。

如果你决定应用 axios，请确保你曾经通过运行npm install axios 装置了该软件包。

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;

上述示例向咱们展现了，如何应用 axios 在点击按钮时，收回 http POST 申请。

如果你应用 axios，请确保你曾经在我的项目的根目录下运行npm install axios 来装置该包。

应用 axios 包时的语法更简洁一些，咱们要解决的实现细节也更少，但概念是一样的。

咱们必须在一个按钮元素上设置 onClick 属性，并在每次点击按钮时收回一个 HTTP 申请。