Axios 是一个流行的库，用于执行 GET、POST、PUT、DELETE 等 HTTP 请求。 Axios 非常适合在 React 应用程序中使用，因为它提供简单的语法并支持 Promises。本文将讨论如何在 ReactJS 应用程序中使用 Axios。
Axios 安装
确保你的 React 项目中安装了 Axios：
npm install axios
在 React 组件中使用 Axios
例如，我们希望使用 GET 方法从 API 检索数据并将其显示在 React 组件中。
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const App = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
setData(response.data);
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
};
fetchData();
}, []);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<div>
<h1>Posts</h1>
<ul>
{data.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
};
export default App;
说明：
import React, { useState } from 'react';
import axios from 'axios';
const App = () => {
const [title, setTitle] = useState('');
const [body, setBody] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
title,
body,
});
console.log('Response:', response.data);
alert('Post successfully created!');
} catch (error) {
console.error('Error posting data:', error);
}
};
return (
<div>
<h1>Create a Post</h1>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<textarea
placeholder="Body"
value={body}
onChange={(e) => setBody(e.target.value)}
></textarea>
<button type="submit">Submit</button>
</form>
</div>
);
};
export default App;
说明：
以上是如何在 ReactJS 中使用 Axios - GET 和 POST 请求的详细内容。更多信息请关注PHP中文网其他相关文章！
