一、为什么使用axios发送http请求？
在web开发中，有时候需要与服务器端进行数据交互。向服务器端发送http请求是一个非常常见的需求。但是javascript原生的XMLHttpRequest实现过于复杂，代码冗余，不易维护。因此，社区逐渐形成axios、fetch这样的第三方库，用于简化http请求的使用。
axios是一个基于Promise的HTTP客户端，用于浏览器和node.js中发送http请求。它具有简洁的API、并发请求、请求取消、拦截http请求和响应、请求数据转换、可配置性等优点。因此，我们在web开发中使用axios发送http请求是一个很好的选择。
二、使用axios发送GET请求
下面我们来看如何使用axios的params发送GET请求。我们以一个简单的例子为例，向服务器请求一个用户名为‘jack’的用户信息。具体代码如下：
axios.get('/api/user', {
params: {
username: 'jack'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
我们可以看到，axios.get第二个参数是一个对象。这个对象有一个params属性，属性值是一个包含请求参数的对象。在我们的例子中，我们向服务器传入了一个参数username，并且值为‘jack’。
这段代码非常简单易懂。当我们向服务器的/api/user发送GET请求时，将请求参数放在params属性中。响应结果将通过Promise.then返回。如果发生错误，则在Promise.catch中捕获。在这里，我们简单处理了错误，只是在控制台输出了错误对象。
三、使用axios发送POST请求
除了使用params发送GET请求，我们还可以使用data发送POST请求。在这个例子中，我们将一个名为‘Peter’的用户信息传给服务器。
axios.post('/api/user', {
name: 'Peter',
age: 25,
job: 'developer'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
我们可以发现POST请求的数据传递是通过data属性实现的。我们将需要传递的数据放在data内，这个data属性就是POST请求的主体。这里我们向服务器发送了一个对象，包括了用户姓名、年龄和职业。这个请求结果也会通过Promise返回。
四、灵活使用params和data
需要注意的是，在axios的使用过程中，params和data是根据请求类型不同而不同的：
- 在GET请求中使用params的方式传递请求参数
- 在POST请求中使用data的方式传递请求参数
因此，我们应该根据实际情况，灵活使用params和data。
下面是一个更为复杂的例子，演示了params和data的使用。
axios({
method: 'post',
url: '/api/user',
params: {
id: '123'
},
data: {
name: 'Peter',
age: 25,
job: 'developer'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
在这个例子中，我们向服务器发送了一个POST请求。请求地址是‘/api/user’。同时，我们也需要传递一个id参数。这个参数是通过params传递的。此外，我们还需要向服务器传递一个JSON对象，包括了一个用户的详细信息。这个用户信息是通过data属性传递的。在上面这个实例中，我们将两个参数都传递给了axios的配置对象中。
五、结语
本文介绍了如何使用axios的params和data属性发送http请求。其中，params属性被大量使用在GET请求中。data属性则被用于发送POST请求。
axios对于web开发者来说是一个非常实用的工具，可以帮助我们简化http请求的过程，更加方便地与服务器进行交互。因此，在web开发过程中，我们应该深入了解axios的使用，并在实际开发中灵活应用。
