Vue请求外链数据：使用axios获取数据
什么是axios？
axios是一个基于Promise的HTTP客户端，用于浏览器和node.js上，它是一个封装了XMLHttpRequest和fetch API的基于http模块的http请求库。它支持在浏览器和 node.js 中发送请求。
为什么使用axios请求数据？
Vue.js本身并不能发送HTTP请求，因此我们需要一个第三方库，axios就是其中一个。它有很多优点，比如易于使用、支持PromiseAPI、拦截请求和响应、转换请求和响应数据等。
如何使用axios进行get请求？
在使用axios进行get请求之前，需要先安装axios：通过npm安装：npm install axios。
```javascript
import axios from 'axios'
axios.get('url').then((response) => {
console.log(response.data)
}).catch((error) => {
console.log(error)
})
```
使用axios.get请求会返回一个Promise，你可以通过.then()或.catch()对结果进行处理。在.then()中，我们可以通过response.data获取到响应数据，在.catch()中获取到错误信息。
如何发送带参数的get请求?
GET请求可以带参数，通过拼接URL的方式传递，例如：http://abc.com/api?key1=value1&key2=value2&key3=value3。我们可以使用axios.get第二个参数来传递参数。在axios.get第一个参数的后面拼接?和需要传递的参数键值对。
```javascript
axios.get('url', {
params: {
key1: value1,
key2: value2
}}).then((response) => {
console.log(response);
})
```
params参数是一个对象，其中包含了Axios请求的参数。我们将这个对象传给axios.get()做参数，这个对象会被序列化，最后以查询字符串（URL参数）的形式附加在URL后。
如何使用axios发送POST请求？
项目中，一般使用POST方法向服务器传递信息（例如表单数据或者JSON）。使用axios的时候，可以使用axios.post方法同步发送POST请求，代码如下：
```javascript
axios.post('url', {
firstName: 'Fred',
lastName: 'Flintstone'
}).then((response) => {
console.log(response);
}).catch((error) => {
console.log(error);
});
```
在这个POST请求例子中，我们通过一个JSON对象传递了一个名字的测试数据。在POST请求中，Axios会将任何属性值被解释为JSON，所以我们不必显式地将任何JSON对象字符串化。
如何使用axios发送并发请求？
有时候，我们需要一次性向服务器请求不同的几个数据集合。这时我们需要使用`axios.all()`方法发送并发请求。`axios.all()`方法需要向axios.get()Promise数组作为参数。例子如下：
```javascript
axios.all([
axios.get('url1'),
axios.get('url2')
]).then(axios.spread((response1, response2) => {
console.log(response1);
console.log(response2);
})).catch((error) => {
console.log(error);
});
```
在并发请求中，我们可以使用`Promise.all()`方法代替`axios.all()`。但是使用`axios.all()`可以在并行请求之间使用拦截器来处理通用状态。
总结
通过axios，vue能够请求到api返回的数据，包括get,post,并行数据，参数传递等等。
