开发者学堂课程【Vue.js 入门与实战:vue-resource 发起 get、post、jsonp 请求】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/586/detail/8157
vue-resource 发起 get、post、jsonp 请求
目录
一、请求地址
二 、演示
三、总结
一、请求地址
vue-resource 是和 vue 高度集成的第三方包,它可以便利发送数据的请求。除了 vue-resource 还可以使用 axios 的第三方包实现数据的请求。
常见的数据请求类型:get post jeonp
测试的 URL请求资源地址:
Get 请求地址: http://vue.studyit.i0/api/getlunbo
Post 请求地址:http://vue.studyit.i0/api/post
Jsonp 请求地址:http://vue.studyit.i0/api/jsonp
二、演示
1.Get 请求
//设置点击事件
getInfo() {//发起 get 请求
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function result)
console.log(result.body)// 通过 result.body 拿到服务器返回的成功的数据。
在 vue 包后导入 vue-resoure, vue-resoure 依赖于 vue ,要注意先后顺序。
在 Vue
上挂载了 $http 属性,通过 $http 可以.出来一些方法。Get 中接
受的参数第一个是 url 地址,第二个是可选的参数。当发起 get
请求后,通过 then 来设置成功的回调函数,失败的回调可以不传,
成功的回调必须传。
举例:
this.$http.get(‘/someurl’,[options]).then(successCallback,errorCallback)
其中,在代码中出现.then,就代表这个方法是通过 promise 封装。
2.Post 请求
postInfo() {//发起 post 请求
this.$http.post('http://vue.studyit.io/api/post',{},{ emulateJSON:true }).then(result →{
console.log(result.body)
发起 post 请求。 post的参数第一个是请求的地址,第二个是发送给服务器的数据对象,第三个是选项。举例:
this.$http.
post
(‘/someurl’
,
[
body]
[options]).then(successCallback,errorCallback)
通过 then 成功的回调。当前的服务器只接受表单类型的提交,表单类型的提交格式是:application/x-www-form-urlencoded 手动发起的 Post 请求,默认没有表单格式,一些服务器处理不了。所以需要做进一步的设计,
通过设置 post 方法的第三个参数,设置提交的内容类型为普通表单数据格式。在使用 post 方法时,第三个参数一般设置为 emulateJSON:true。
Options 类型
3.jsonp 请求
jsonpInfo(){//发起 JSONP 请求
this.$http.jsonp('http://vue.studyit.io/api/isonp').then(result=>{
console.log(result.body)
jsonp的参数第一个是地址,第二个是配置对象。
三、总结
get 和 jsonp 较为类似,直接赋予地址,通过.then拿到成功的回调设置即可。但是 post 较为复杂,第一个参数是 url 地址,第二个参数是提交给服务器的数据,第三个参数规定了表单格式,以普通表单进行数据提交。