Vue — 专属ajax
最后更新于：2022-04-02 08:06:48
>[success] # 使用vue-resource 包进行异步
## [vue-resource 实现 get, post, jsonp请求](https://github.com/pagekit/vue-resource)
~~~
1.配置resource全局配置了，请求的数据接口 根域名 Vue.http.options.root = 'http://vue.studyit.io/';
2.全局启用 emulateJSON 选项Vue.http.options.emulateJSON = true;，就是当post 的时候不用在添加第三个参数
~~~
* 获取所有数据分析思路
~~~
1. 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过 this.$http 来
发起数据请求
2. 根据接口API文档，知道，获取列表的时候，应该发起一个 get 请求
3. this.$http.get('url').then(function(result){})
4. 当通过 then 指定回调函数之后，在回调函数中，可以拿到数据服务器返回的 result
5. 先判断 result.status 是否等于0，如果等于0，就成功了，可以 把
result.message 赋值给 this.list ; 如果不等于0，可以弹框提醒，获取数据失败！
~~~
* 添加数据分析思路
~~~
1. 听过查看 数据API接口，发现，要发送一个 Post 请求， this.$http.post
2. this.$http.post() 中接收三个参数：
2.1 第一个参数： 要请求的URL地址
2.2 第二个参数： 要提交给服务器的数据 ，要以对象形式提交给服务器 { name: this.name }
2.3 第三个参数： 是一个配置对象，要以哪种表单数据类型提交过去， { emulateJSON: true }, 以普通表单格式，将数据提交给服务器 application/x-www-form-urlencoded
3. 在 post 方法中，使用 .then 来设置成功的回调函数，如果想要拿到成功的结果，需要 result.body
~~~
>[danger] ##### 案例
~~~