---
title: 09-Vue中的Ajax请求
publish: true
---
## vue-resource的介绍
`vue-resource`是Vue高度集成的第三方包。
官网链接：
- 文档（http相关）：
vue-resource 依赖于 Vue。所以，我们要按照先后顺序，导入vue.js和vue-resource.js文件。
**解释**：
`vue.js`文件向Windows对象暴露了`Vue`这个关键词；`vue-resource.js`向Vue身上挂载了`this.$http`这个属性。于是，我们可以直接写`this.$http.get`或者`this.$http.post`或者`this.$http.jsonp`来调用。
## vue-resource 发送Ajax请求
常见的数据请求类型包括：get、post、jsonp。下面我们分别讲一讲。
### get 请求
**格式举例**：
```javascript
this.$http.get(url)
.then(function (result) { // 当发起get请求之后，通过 .then 来设置成功的回调函数
console.log(result.body); // response.body就是服务器返回的成功的数据
var result = result.body;
},
function (err) {
//err是异常数据
});
```
获取到的`response.body`就是要获取的数据，但直接打印出来是 object，所以要记得转成string。
**举例**：获取数据
现规定，获取品牌数据的 api 接口说明如下：
```html
Document
```
上方代码中，我们用到了生命周期函数`created`，意思是：程序一加载，就马上在`created`这个函数里执行`getlist()`方法。
运行的结果如下：
如果我直接在浏览器中输入请求的url，获取的json数据如下：（可以看到，这种方式获取的是相同的数据）
### post请求
**格式举例**：
```javascript
// 方法：$http.post(url, 传给服务器的请求体中的数据， {emulateJSON:true})
// 通过 post 方法的第三个参数{ emulateJSON: true } ，来设置 提交的内容类型 为 普通表单数据格式
this.$http.post(url, { name: '奔驰' }, { emulateJSON: true })
.then(function (response) {
alert(response.body.message);
},
function (error) {
});
```
上方代码中，post()方法中有三个参数，其中第三个参数是固定值，照着写就可以了。
**代码举例**：（添加数据）
现规定，添加品牌数据的 api 接口说明如下：
代码如下：（在上一段代码的基础之上，添加代码）
```html
Document
```
**代码举例**：（删除数据）
```html
Document
```
### jsonp
**格式举例**：
```javascript
// 利用vue-resource中的jsonp方法实现跨域请求数据，这里要注意的是：
// url后面不需要跟callback=fn这个参数了，jsonp方法会自动加上
this.$http.jsonp('http://vuecms.ittun.com/api/getlunbo?id=1')
.then(function (response) {
console.log(JSON.stringify(response.body));
}, function (err) {
//err是异常数据
});
```
请求结果：
## JSONP的实现原理
由于浏览器的安全性限制，默认不允许Ajax发起跨域（协议不同、域名不同、端口号不同）的请求。浏览器认为这种访问不安全。
**JSONP的实现原理**：通过动态创建script标签的形式，用script标签的src属性，代表api接口的url，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）。
具体实现过程：
- 先在客户端定义一个回调方法，预定义对数据的操作
- 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的api接口；
- 服务器api接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
- 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了
## axios
除了 vue-resource 之外，还可以使用 `axios` 的第三方包实现实现数据的请求。
## 通过Vue全局配置api接口的url地址
api接口的url地址包括：绝对路径+相对路径。
我们在做Ajax请求的时候，所填写的url建议填**相对路径**，然后把**绝对路径**放在全局的位置。
Vue就提供了这个功能。举例如下：
```html
```
如上方代码所示，第一步是在全局的位置写**绝对路径**：
```javascript
Vue.http.options.root = 'http://smyhvae/';
```
第二步是在Ajax请求的url中写**相对路径**：（注意，前面不要带`/`）
```javascript
this.$http.get('api/getprodlist')
```