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（请求数据）

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

主要代码如下：

    button
    
{{ key }} ---- {{ value }}

效果如下：

例子1.gif

实例 2（请求图片信息）

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

具体代码如下：

    button
    
    
{{ key }} :: {{ value }}

效果如下：

例子2.gif

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

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

• 输入 aurora

image1.png

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

image2.png

• 双击打开链接，查看数据

image3.png

• 实现代码

    button
    

        {{ key }} :: {{ value }}
    

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

image4.png

实现效果：

效果.gif