Vue-resource 发起网络请求

什么是 Vue-resource？

The plugin for Vue.js provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.

就是说它是一个用 XMLHttpRequest 或 JSONP 提供发出 Web 请求和处理响应服务的 Vue 插件，和它有相同作用的还有axios

对于http服务

Vue实例提供了 .$http 服务，它可以发送 HTTP 请求。请求方法调用返回一个解析为响应的Promise。此外，Vue实例将在所有函数回调中自动绑定到此实例。

如何配置 Vue-resource?

1.将 vue-resource.js 文件下载到本地后，引用资源：

<script src="./lib/Vue-2.5.21.js"></script>
<script src="./lib/vue-resource.js"></script>

注意：引用资源时 Vue-resource 应在 Vue 之后，因为 Vue-resource 依赖于 Vue，如上图

如何使用 Vue-resource 发起请求？

最好是去看官方文档

  <script>
    var vm = new Vue({
      el: "#app",
      data: {},
      methods: {
        getInfo() { //发起get请求
          // 成功的回调必须要传，失败的回调是可选的
          // 当发起get请求之后，通过.then设置回调成功的函数
          console.log("1")
          this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function (result) {
            // 通过 result.body 请求拿到服务器返回成功的数据
            console.log(result.body)          
          })
        },
        postInfo() {
          // application/x-wwww-form-urlendcoded
          // 手动发起 Post 请求，默认没有表单格式，所以，有的服务器处理不了
          // 这个时候 通过post的第三个参数， { emulatJSON: true } 设置提交的内容类型 为普通表单数据格式
          this.$http.post('http://jsonplaceholder.typicode.com/posts', {}, {emulateJSON: true}).then(result => {
            console.log(result.body)
          })
        },
        jsonpInfo() {
          this.$http.jsonp("http://jsonplaceholder.typicode.com/posts").then(result => {
            console.log(result.body)
          })
        }
      }
    })
  </script>

p.s. 代码中网址为请求 json 假数据的一个网站

全局配置emulateJSON选项

post 请求中第三个参数往往需要 {emulateJSON: true} 以确保 content-type 为 application/x-wwww-form-urlendcoded
为了避免每次发送post请求都要写上这么一段,可以如官网所言，添加这么一段：

      // 全局启用 emulateJSON 选项 完成psot的情况
      Vue.http.options.emulateJSON = true;

如此一来就可以省略 post 请求中的第三个参数

全局配置数据接口的根域名

写多了就会发现，我们好像一直在请求的第一个参数中填一大段相同的网站地址，这一点就令人烦躁，反复写这么一段还很可能出错。另外未来在修改的时候工作量也很大。为了避免这一点，如官网所言，添加这么一段：

      Vue.http.options.root = "http://jsonplaceholder.typicode.com/";

像这样使用

    getAllList() {
      this.$http.get("posts").then(result => {
        if (result.status === 200) {
          // 成功状态
          // 注意通过 $http 获取到的数据，都在 result.body 中放着
          this.list = result.body;
        } else {
          alert("获取数据失败！");
        }
      });
    }

如果通过全局配置了请求数据接口根域名，则在每次单独发起http请求的时候，请求的url路径应该以相对路径开头，前面不能带斜线，否则不会启用根路径拼接

讲人话，再说一遍系列：
写在配置的网站地址 http://jsonplaceholder.typicode.com 后面一定要加上一个 /，
使用的时候我们一定不能在路由前面加上 /(是 posts 不是 /posts)

p.s.如果有不足还请指正，多谢

// 本文档搭配 bgm:Gun's & Roses (Paradise Lunch) 使用更佳，因为我就是听它写的