Vue-resource的使用

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 对象。

相关参数

发送请求可以携带一些参数，一个完整的请求语句如下：
this.$http.requestType(url, [body],[config]).then(successCallback, errorCallback)
或者
Vue.http.requestType(url, [body],[config]).then(successCallback, errorCallback)

requestType：请求类型

不同请求类型包含的参数不同，请求的类型主要有：

• get(url, [config])
• head(url, [config])
• delete(url, [config])
• jsonp(url, [config])
• post(url, [body], [config])
• put(url, [body], [config])
• patch(url, [body], [config])

参数选项

主要的参数选项有：

• url：请求的地址。
• body：作为请求主体发送的数据。
• header：请求的 HTTP 头部。
• params：请求数据，是一个对象。
• timeout：响应时间。
• before：发送请求之前的回调函数。
• uploadProgress：上传事件的函数。
• downloadProgress：下载事件的函数。

响应返回对象

当请求成功后，会返回一个 Promise 对象。

这个对象中主要包含以下这些属性：

• url：响应的 URL 地址。
• body：响应主体，主要类型有：Object/Blob/string。
• Headers：响应头部对象。
• ok：布尔值， 是否响应成功。
• status：2 开头表示请求成功，主要是 200~299。
• statusText：响应状态的短语。

这个对象中主要包含以下这些方法：

• text()：类型是 Promise，将请求的 body 主体转化为 string 类型。
• json()：类型是 Promise，将请求的 body 主体解析为 JSON 对象。
• blob()：类型是 Promise，将请求的 body 主体转化为 Blob 对象。主要是用于请求一些图片的相关信息，如：图片类型，大小等。

例子（请求数据、请求图片信息、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

4人点赞

FrontEnd

作者：Ertsul
链接：https://www.jianshu.com/p/44ebbd7cc954
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。