1、简介
在 Vue.js 中我们可以使用 Axios 完成 Ajax 请求，Axios 是一个基于 Promise 的 HTTP 库
这篇文章的文字不多，基本都是代码，解释也都写在注释里面啦
有兴趣的朋友也可以直接去看看官方文档：http://www.axios-js.com/zh-cn/docs/
2、安装
（1）CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>（2）NPM
> npm install axios3、GET 请求
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
</head>
<body>
<div id="app">
<p>{{ info }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
info: null
},
mounted: function () {
let _this = this;
// GET 方法原型: axios.get(url[, config])
// 可以在 URL 中添加参数
axios
.get('http://www.httpbin.org/get?firstName=Steve&lastName=Jobs')
.then(function (response) { _this.info = response.data; })
.catch(function (error) { console.log(error); });
}
})
</script>
</body>
</html>4、响应结构
当我们发送请求后，接收到的响应（response）究竟是个什么东西呢？下面让我们来看一看
{
// 服务器返回的数据
// http://www.httpbin.org 是一个用于测试请求的网站，它所返回的数据就是我们请求的信息
data: {},
// 状态码
status: 200,
// 状态码对应的状态信息
statusText: "OK",
// 响应头
headers: {},
// 为请求提供的配置信息
config: {}
}5、POST 请求
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
</head>
<body>
<div id="app">
<p>{{ info }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
info: null
},
mounted: function () {
let _this = this;
// POST 方法原型: axios.post(url[, data[, config]])
// 可以通过 data 添加参数
axios
.post('http://www.httpbin.org/post', {
firstName: 'Steve',
lastName: 'Jobs'
})
.then(function (response) { _this.info = response.data; })
.catch(function (error) { console.log(error); });
}
})
</script>
</body>
</html>5、请求配置
除了上面两种常见的用法，我们还可以给 axios() 方法传入一个配置对象，里面包含用于请求的相关配置
比如说，我们可以用这种方法发送一个简单的 GET 请求：
axios({
url: 'http://www.httpbin.org/get',
method: 'get',
params: {
firstName: 'Steve',
lastName: 'Jobs'
}
})同样的，我们也可以用这种方法发送一个简单的 POST 请求：
axios({
url: 'http://www.httpbin.org/post',
method: 'post',
data: {
firstName: 'Steve',
lastName: 'Jobs'
}
})此外，一些比较常用的配置项如下：
url：请求 URL，唯一的必填项baseURL：自动加在url前，以便于url使用相对路径method：请求方法，默认为 getheaders：请求头params：请求参数paramsSerializer：将params序列化data：请求数据transformRequest：在发送请求前允许修改请求数据transformResponse：在接收响应前允许修改响应数据timeout：指定超时时间withCredentials：表示跨域请求时是否需要使用凭证，默认为 falseauth：表示使用 HTTP 基础验证并提供凭据responseType：服务器响应的数据类型，默认为 jsonmaxContentLength：服务器响应内容的最大长度
我们还可以为请求配置设置默认值：
// 例如，下面设置 baseURL 为 https://www.example.com
axios.defaults.baseURL = 'https://www.example.com'6、拦截器
我们 then() 或 catch() 之前拦截请求或响应，并对它们进行一些处理
// 添加请求拦截器
var RequestInterceptor = axios.interceptors.request.use(function (config) {
// 对请求数据做点什么
return config;
}, function (error) {
// 对请求错误做点什么
return Promise.reject(error);
});
// 添加响应拦截器
var ResponseInterceptor = axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});如果想移除拦截器，也很简单
// 移除请求拦截器
axios.interceptors.request.eject(RequestInterceptor);
// 移除响应拦截器
axios.interceptors.response.eject(ResponseInterceptor);7、并发请求
axios.all() 可以批量发送请求，然后等所有请求都返回结果时，才执行一个回调
axios.all([
asyncMethodOne(),
asyncMethodTwo()
])
.then(axios.spread(function (resOne, resTwo) {
// 现在两个异步请求 asyncMethodOne 和 asyncMethodTwo 都已完成
// resOne 和 resTwo 分别是两个请求返回的响应
}))