vue-resource 发起 get、post、jsonp 请求 | 学习笔记

简介: 快速学习 vue-resource 发起 get、post、jsonp 请求

开发者学堂课程【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 类型

1666876297624.jpg

1666876305526.jpg

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 地址,第二个参数是提交给服务器的数据,第三个参数规定了表单格式,以普通表单进行数据提交。

相关文章
|
6月前
|
资源调度 JavaScript 前端开发
vue封装请求
vue封装请求
34 0
|
2月前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
144 2
|
6月前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
3月前
|
JavaScript UED
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
|
6月前
|
资源调度 前端开发 JavaScript
Vue3中如何使用axios进行Ajax请求?
Vue3中如何使用axios进行Ajax请求?
253 1
|
5月前
|
JavaScript
vue 请求拦截器 的响应拦截器有几种?
vue 请求拦截器 的响应拦截器有几种?
|
5月前
|
JavaScript
vue 发送请求时展示进度条——NProgress的简单使用
vue 发送请求时展示进度条——NProgress的简单使用
655 0
|
6月前
|
JavaScript API
本地开发环境请求服务器接口跨域的问题(vue的问题)
本地开发环境请求服务器接口跨域的问题(vue的问题)
476 1
|
6月前
Vue3 配置代理和使用全局axios请求数据
Vue3 配置代理和使用全局axios请求数据
663 1
|
6月前
|
JavaScript API
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口