异步等待 axios reactjs

在ReactJS应用程序开发中，异步请求是一项非常常见的任务。 通常使用axios来处理异步请求。 Axios是一个基于Promise的HTTP客户端，用于处理请求和响应数据。 在ReactJS组件中，我们可以使用异步等待等待该请求，以避免阻止应用程序渲染。

使用axios进行异步请求

要使用axios进行异步请求，首先需要在ReactJS应用程序中安装axios：

npm install axios

然后，在您的ReactJS组件中导入它并使用它：

import axios from 'axios';

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

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://jsonplaceholder.typicode.com/posts'
      );

      setData(result.data);
    };

    fetchData();
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>
          {item.title}
        </li>
      ))}
    </ul>
  );
}

在上面的示例中，我们使用useEffect钩子来在组件挂载时调用异步请求。 我们使用async/await语法异步等待axios请求，然后使用setData将结果保存在状态中。 我们在组件中使用此状态以呈现结果。

参考资料

• Axios - Github
• ReactJS - 使用effect Hook发起异步请求