Vue-resource总结

2018-03-21 本文已影响80人 Ertsul

Vue 实现 Ajax请求和跨域请求主要是通过插件vue-resource.js。

引进

引进插件vue-resource.js的方式主要有以下三种：

将插件vue-resource.js文件下载到本地，通过script引进。
在网站http://www.bootcdn.cn/vue-resource/选择插件版本，通过script引进。
如果项目是通过 webpack 构建的，可以在项目文件中安装插件，然后引进。实现如下：

// 安装命令
npm install vue-resource --save
// 引进
import  VueResource  from 'vue-resource'

发送请求

实现发送请求的方式有两种：

全局方式：Vue.http.get(...)
Vue 实例内部（放在 methods 内）：this.$http.get(...)

返回结果

发送请求后，响应返回的是 Promise 对象。

// 全局
Vue.http.get(url).then(response => {
    ...     // response级请求后返回的对象
}).catch(function(err){
    ...
})

// 实例内部
this.$http.get(url).then(response => {
    ...
}).catch(function(err){
    ...
})

上面例子，通过get方式向url请求数据，然后将请求结果返回，返回结果是一个 Promise 对象。

例子（请求数据、请求图片信息、jsonp 实现跨域请求）

实例 1（请求数据）

需求：请求本地文件中的数据，加载都页面上。

主要代码如下：

<div id="app">
    <button type="button" @click="ajaxRequest">button</button>
    <p v-for = "(value, key) of msg">{{ key }} ---- {{ value }}</p>
</div>

<script src="../vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: {
                Url: '',
                Body: '',
                Status: '',
                StatusText: '',
            },
            url: './data.txt'
        },
        methods: {
            ajaxRequest: function () {
                this.$http.get(this.url)
                    .then(response => {
                        this.msg.Url = response.url     // 响应地址
                        this.msg.Body = response.body   // 响应主体
                        this.msg.Status = response.status  // 响应状态
                        this.msg.StatusText = response.statusText   // 响应状态短语
                    }).catch(function (err) {
                        alert("Error", err)
                    })
            }
        }
    })
</script>

效果如下：

例子1.gif

实例 2（请求图片信息）

需求：请求图片的相关数据，加载都页面上。

具体代码如下：

<div id="app">
    <button type="button" @click="ajaxFun">button</button>
    <img :src="img" alt="picture">
    <p v-for = "(value, key) of imgInfo">{{ key }} :: {{ value }}</p>
</div>

<script src="../vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.min.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            iShow: true,
            msg: '',
            img: './rocket.jpg',
            imgInfo: {
                type: '',
                size: ''
            }
        },
        methods: {
            // 获取图片的信息
            ajaxFun: function () {
                this.$http.get(this.img, {
                    responseType: 'blob'
                }).then((response) => {
                    return response.blob() // 异步请求图片的resolve状态返回给blob
                }).then(blob => {   // blob处理
                    this.imgInfo.type = blob.type
                    this.imgInfo.size = blob.size
                }).catch(function (e) {     // 错误捕获
                    alert(e)
                })
            }
        }
    })
</script>

效果如下：

例子2.gif

实例 3（jsonp 实现跨域请求）

需求：百度输入框搜索：aurora，本地实现跨域请求数据。

输入 aurora

image1.png

找到要跨域请求数据的链接

image2.png

双击打开链接，查看数据

image3.png

实现代码

<div id="app">
    <button type="button" @click="jsonpRequest">button</button>
    <p v-for="(value, key) of msg">
        {{ key }} :: {{ value }}
    </p>
</div>

<script src="../vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.min.js"></script>
<script>
    function __jsonp21__(data) {
        console.log(data);
    }
    new Vue({
        el: '#app',
        data: {
            msg: {
                status: '',
                info: []
            }
        },
        methods: {
            jsonpRequest: function () {
                this.$http.jsonp(
                    'https://sp1.baidu.com/5b11fzupBgM18t7jm9iCKT-xh_/sensearch?wd=aurora&cb=bd_cb_dict3_1521617356074&callback=bd_cb_dict3_1521617356074&_=1521617355798', {
                        jsonp: 'cb' // 指定jsonp回调函数名称
                    }
                ).then(response => {
                    console.log(response.body);
                    let res = response.body
                    this.msg.status = res.err_msg
                    this.msg.info = res.liju_result
                })
            }
        }
    })
</script>

注意：this.$http.jsonp()的第二个参数{...}用于指定参数和回调函数的名称。如果要传递参数给地址，则参数的具体形式为：params:{...}

image4.png

实现效果：

效果.gif

Vue-resource总结

引进

发送请求

返回结果

相关参数

requestType：请求类型

参数选项

响应返回对象

例子（请求数据、请求图片信息、jsonp 实现跨域请求）

实例 1（请求数据）

实例 2（请求图片信息）

实例 3（jsonp 实现跨域请求）

猜你喜欢

热点阅读