Vue中vue-resource实现get,post,jsonp请求

Vue中vue-resource实现get,post,jsonp请求

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

常见的数据请求类型 get post jsonp

JSONP的实现原理
由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；
可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；

vue-resource 的配置步骤：

直接在页面中，通过script标签，引入 vue-resource 的脚本文件；
注意：引用的先后顺序是：先引用 Vue 的脚本文件，再引用 vue-resource 的脚本文件；

发送get请求：

this.$http.get('url地址请求体').then(function() {
                        console.log(result.body)

发送post请求

// 发起post请求   applicaton/x-www-form-urlencoded
                    //手动发起的post请求，默认没有表单格式，所以，有的服务器处理不了
                    //第二个参数，要提交给服务器的数据
                    // 通过post方法的第三个参数，{emulateJsON:true} 设置 提交的内容类型为普通表单数据格式
                    this.$http.post('url地址', {}, {
                        emulateJSON: true
                    }).then(result => {
                        console.log(result.body)
                    })

发起JSONP请求

this.$http.jsonp('url地址请求体').then(result => {
                        console.log(result.body)