Vue当中的数据请求
在以前的开发过程当中,我们会使用Ajax(jQuery)里面的Ajax来进行数据通讯,它主要就是为了进行数据请求,现在在Vue里面,我们也有一个专门的插件去进行数据请求
vur-resource数据请求
- get请求
new Vue({
el: "#app",
methods: {
getDate() {
var url = "http://api.softeem.xin/movie/list.json?type=hot&offset=0&limit=10";
//在vue-resource里面,他内部的请求是通过Promise来完成的异步操作,所以 我们要通过then或catch来处理它的后面操作
this.$http.get(url).then(res => {
//vue-resource返回的结果是一个对象 res,它有两个属性,一个是control 另一个是data
//它真正请求回来的数据在data里面
console.log(res.data);
}).catch(err => {
console.log(err);
})
}
}
})
-
带参数params的get请求
我们在使用get请求的时候,请求地址与请求参数是以?的形式连接在一起的,但是现在我们可以直接把请求参数当成一个对象传递进去
new Vue({ el: "#app", methods: { getDate() { var url = "http://api.softeem.xin/movie/list.json?type=hot&offset=0&limit=10"; //axios this.$http.get("http://api.softeem.xin/movie/list.json", { params: { type: "hot", offset: 0, limit: 10 } }).then(res => { //res里面有两个,一个是data,一个是control,这两个属性都属于我们的body里面的 //body是请求回来的对象 (直接转成的JS对象) console.log(res.body); //如果你要拿到JSON字符串,这个时候bodyText它是请求的字符串 console.log(res.bodyText); //headers代表了response Headers 服务器返回头部信息 }).catch(err => { console.log(err); }) } } })
-
post请求
说明:vue-resource的post请求与axios的post请求保持一致语法
new Vue({ el: "#app", methods: { getDate() { //vue-resource它的请求的get与post是根axios保持一致 var url = "http://api.softeem.xin/movie/list.json?type=hot&offset=0&limit=10"; //axios this.$http.get("http://api.softeem.xin/movie/list.json", { type: "hot", offset: 0, limit: 10 }).then(res => { //res里面有两个,一个是data,一个是control,这两个属性都属于我们的body里面的 //body是请求回来的对象 (直接转成的JS对象) console.log(res.body); //如果你要拿到JSON字符串,这个时候bodyText它是请求的字符串 console.log(res.bodyText); //headers代表了response Headers 服务器返回头部信息 }).catch(err => { console.log(err); }) } } })
-
jsonp请求
vue-resource保持一个特性就是可以发起jsonp的请求,具体如下
new Vue({ el: "#app", methods: { getDate() { //url:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aaa&cb=jQuery110208650253613299665_1523514428484 //后面的cb是回调的方法名 this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", { jsonp: "cb", params: { wd: "b" } }).then(res => { console.log(res); //在这里,要注意 ,它的值,也拿到回调时面去了 }).catch(err => { console.log(err); }) } } })
评论区