vue-resource

除了vue-resource外，也可使用axios的第三方包实现数据请求

发送get/post/jsonp请求

示例代码：

　　 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                getInfo() {
                    //发起get请求，通过.then设置成功的回调函数
                    this.$http.get('https://jsonplaceholder.typicode.com/todos/1').then(result => {
                        //通过result.body拿到服务器返回的成功数据
                        console.log(result.body)
                    })
                },
                postInfo() {
                    //手动发起的post请求默认没有表单格式，需要设置
                    this.$http.post('http://jsonplaceholder.typicode.com/posts', {}, { emulateJSON: true }).then(result => {
                        console.log(result.body)
                    })
                },
                jsonpInfo() {
                    this.$http.jsonp('https://jsonplaceholder.typicode.com/todos/1').then(result => {
                        console.log(result.body)
                    })
                }
            }
        })
    </script>

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

 （1）使用全局配置设置默认值

如果使用了根域名配置，请求的数据接口中不url路径应以相对路径开头，前面不能带`/`，否则不会启用根路径拼接。

Vue.http.options.root = 'https://jsonplaceholder.typicode.com';
var vm = new Vue({
    el: '#app',
    data: {},
    methods: {
        getInfo() {
            this.$http.get('todos/1').then(result => {
                console.log(result.body)
            })
        }
    }
})

（2）在Vue组件选项中设置默认值

var vm = new Vue({
    el: '#app',
    data: {},
    http: {
        root: 'https://jsonplaceholder.typicode.com'
    },
    methods: {
        getInfo() {
            this.$http.get('todos/1').then(result => {
                console.log(result.body)
            })
        }
    }
})

 全局配置emulateJSON

设置全局的表单格式为application/x-www-form-urlencoded格式

Vue.http.options.emulateJSON = true;
var vm = new Vue({
    el: '#app',
    data: {},
    http: {
        root: 'https://jsonplaceholder.typicode.com'
    },
    methods: {
        postInfo() {
            this.$http.post('posts', {}).then(result => {
                console.log(result.body)
            })
        }
    }
})