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
网友评论