Axios 是一个基于 Promise 的 HTTP 客户端,用于发送 HTTP 请求。它可以在浏览器和 Node.js 中使用,并且支持其他平台。在本文中,我们将介绍如何使用 Axios 进行 GET、POST 请求,并讨论拦截器的使用。
安装 Axios
要开始使用 Axios,首先需要将其安装到项目中。在终端执行以下命令:
npm install axios
发送 GET 请求
GET 请求用于从服务器获取数据。以下是使用 Axios 发送 GET 请求的示例代码:
import axios from 'axios';
axios.get('/api/data')
.then(response => {
// 数据请求成功
console.log(response.data);
})
.catch(error => {
// 发生错误
console.error(error);
});
上述代码中,我们使用 axios.get
方法发送一个 GET 请求到 /api/data
。then
方法用于处理请求成功的响应,catch
方法用于处理发生的错误。我们可以通过 response.data
来访问响应的数据。
发送 POST 请求
POST 请求用于向服务器发送数据。以下是使用 Axios 发送 POST 请求的示例代码:
import axios from 'axios';
const data = {
name: 'John Doe',
age: 25
};
axios.post('/api/data', data)
.then(response => {
// 数据发送成功
console.log(response.data);
})
.catch(error => {
// 发生错误
console.error(error);
});
上述代码中,我们使用 axios.post
方法发送一个包含数据的 POST 请求到 /api/data
。我们将数据对象传递给 axios.post
方法作为第二个参数。
拦截器
Axios 还提供了拦截器功能,允许我们在发送请求或接收响应之前对其进行处理。以下是一个使用拦截器的示例:
import axios from 'axios';
// 请求拦截器
axios.interceptors.request.use(request => {
console.log('请求拦截器', request);
// 可以在此处修改请求配置
return request;
}, error => {
console.error('请求拦截器发生错误', error);
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(response => {
console.log('响应拦截器', response);
// 可以在此处修改响应数据
return response;
}, error => {
console.error('响应拦截器发生错误', error);
return Promise.reject(error);
});
// 发送请求
axios.get('/api/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
上述代码中,我们定义了一个请求拦截器和一个响应拦截器。拦截器函数接收请求或响应作为参数,并在处理完成后返回它们。我们可以在拦截器中修改请求配置或响应数据。
拦截器对于在发送请求之前或处理响应之前执行某些操作非常有用。比如,在请求之前添加身份验证令牌,或在响应中处理错误。
结论
Axios 是一款功能强大且易于使用的 HTTP 客户端库。在本文中,我们学习了如何使用 Axios 发送 GET、POST 请求,并了解了拦截器的用法。希望这篇文章对你有所帮助,快去尝试使用 Axios 进行数据请求吧!
参考链接:
本文来自极简博客,作者:冬日暖阳,转载请注明原文链接:使用 Axios 进行数据请求