Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
- 在一个
Vue
实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
以下是一个简单的get
应用示例:
// GET /someUrl
this.$http.get('/someUrl').then(response => {
// success callback
}, response => {
// error callback
});
四、http 方法列表
vue-resource
的请求API
是按照REST
风格设计的,它提供了7种请求API
:
get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])
除了jsonp
以外,另外6种的API
名称都是标准的HTTP
方法。当服务端使用REST API
时,客户端的编码风格和服务端的编码风格近乎一致,这可以减少前端和后端开发人员的沟通成本。
options
对象
发送请求时的options
选项对象包含以下属性:
Response
返回对象的参数以及对象的方法如下:
五、示例代码
简单的post
提交
{
// POST /someUrl
this.$http.post('/someUrl', {foo: 'bar'}).then(response => {
// get status
response.status;
// get status text
response.statusText;
// get 'Expires' header
response.headers.get('Expires');
// get body data
this.someData = response.body;
}, response => {
// error callback
});
}
带查询参数和自定义请求头的GET
请求:在这里插入代码片
{
// GET /someUrl?foo=bar
this.$http.get('/someUrl', {params: {foo: 'bar'}, headers: {'X-Custom': '...'}}).then(response => {
// success callback
}, response => {
// error callback
});
}
获取图片并使用blob()
方法从响应中提取图片的主体内容。
// GET /image.jpg
this.$http.get('/image.jpg', {responseType: 'blob'}).then(response => {
// resolve to Blob
return response.blob();
}).then(blob => {
// use image Blob
});
六、安装
npm install vue-resource --save
–save
参数的作用是在我们的包配置文件package.json
文件中添加对应的配置。安装成功后, 可以查看package.json
文件,会发现多了"vue-resource": "^1.3.4"
的配置。具体如下:
"dependencies": {
"vue": "^2.3.3",
"vue-resource": "^1.3.4",
"vue-router": "^2.7.0"
},
七、应用
通过以上步骤,已经安装好了vue-resource
,但是在vue-cli
中我们如何使用呢?
首先,我们需要在main.js
文件中导入并注册vue-resource
:
import VueResource from 'vue-resource'
Vue.use(VueResource)
八、resource 服务应用
vue-resource
提供了另外一种方式访问HTTP
——resource服务
,resource服务
包含以下几种默认的action
:
get: {method: 'GET'},
save: {method: 'POST'},
query: {method: 'GET'},
update: {method: 'PUT'},
remove: {method: 'DELETE'},
delete: {method: 'DELETE'}
1、resource
对象也有两种访问方式:全局访问和局部访问。
//全局访问
Vue.resource
//局部访问
this.$resource
可以结合URI Template
一起使用,以下示例的apiUrl都设置为{/id}
了:
apiUrl: 'http://22.189.25.95:8080/api/customers{/id}'
{/id}
相当于一个占位符,当传入实际的参数时该占位符会被替换。例如,{ id: vm.item.customerId}
中的vm.item.customerId
为12,那么发送的请求URL为:'http://22.189.25.95:8080/api/customers/12'
2、使用实例
最后
javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
[外链图片转存中…(img-AV0vjWO4-1719231368313)]
[外链图片转存中…(img-HBZf6fYp-1719231368315)]