在前端开发中，我们经常需要与服务器进行通信，向服务器发送请求并获取数据。axios是一个被广泛使用的前端HTTP库，它简单易用，并提供了许多实用的功能来处理请求和响应。
本文将向您介绍如何使用axios发送GET和POST请求，并展示如何处理请求参数、解析响应和处理错误。
安装axios
首先，我们需要在项目中安装axios。您可以使用npm或者yarn来进行安装。
npm install axios
# 或者
yarn add axios
安装完成后，我们可以在项目中引入axios。
import axios from 'axios';
发送GET请求
使用axios发送GET请求非常简单。只需调用axios.get()方法，传入请求的URL即可。
axios.get('/api/users')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
以上代码将向/api/users发送一个GET请求，并在控制台打印响应数据。如果请求成功，响应数据将被打印；如果请求失败，错误信息将被打印。
发送POST请求
与发送GET请求类似，发送POST请求也非常简单。只需调用axios.post()方法，传入请求的URL和请求体即可。
axios.post('/api/users', {
name: 'John Doe',
age: 30
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
以上代码将向/api/users发送一个POST请求，并传递一个包含"name"和"age"属性的对象作为请求体。如果请求成功，响应数据将被打印；如果请求失败，错误信息将被打印。
请求参数
有时我们需要传递一些额外的参数给服务器。比如在发送GET请求时，我们可以通过在URL中添加查询参数来实现。
axios.get('/api/users', {
params: {
page: 1,
limit: 10
}
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
以上代码会向/api/users发送一个GET请求，并在URL上添加查询参数page=1和limit=10。这样服务器就可以根据这些参数来返回相应的数据。
响应解析
当我们发送请求并获取到响应后，我们通常需要解析响应数据。axios可以自动将响应数据解析为JavaScript对象或数组。
axios.get('/api/users')
.then(function (response) {
const data = response.data;
console.log(data);
// 对响应数据进行处理
})
.catch(function (error) {
console.log(error);
});
在上面的代码中，我们使用response.data来获取响应数据，并将其打印在控制台上。然后可以使用解析后的数据进行一些操作，如渲染到页面上。
错误处理
当请求发生错误时，我们希望能够得到错误信息并进行处理。axios提供了一个.catch()方法来捕获请求发生的错误。
axios.get('/api/users')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log("请求发生错误：" + error.message);
});
在上面的代码中，我们在.catch()方法中打印了错误信息。您还可以根据不同的错误进行不同的处理，例如显示一个错误消息给用户或重试请求。
结论
axios是一个功能强大且易于使用的HTTP库，可以帮助我们在前端开发中发送请求、处理响应和处理错误。本文向您介绍了如何使用axios发送GET和POST请求，以及如何处理请求参数、解析响应和处理错误。希望这篇文章能对您有所帮助！
转载请注明原文链接：使用axios发送GET、POST请求：请求参数、响应解析与错误处理
作者：Your Name 发布于：2021年1月1日
注意：本文归作者所有，未经作者允许，不得转载
