vue-resource

在Vue中实现异步加载需要使用到vue-resource库，利用该库发送ajax。

引入vue-resource

<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

要注意的是，vue-resource依赖于Vue，所以要先引入Vue，再引入vue-resource。

引入vue-resource之后，在Vue的全局上会挂载一个$http方法，在vm.$http方法上有一系列方法，每个HTTP请求类型都有一个对应的方法。

vue-resource使用了promise，所以$http中的方法的返回值是一个promise。

请求方法

POST请求

用于提交数据

常用data格式：

• 表单提交：multipart/form-data，比较老的网站会使用表单提交去获取数据，现在基本都不用表单提交，而是使用ajax，但是现在表单提交仍然存在，有时候需要做图片上传、文件上传。
• 文件上传：application/json，现在大多数情况下都是用这个格式
  
  

使用方法：vm.$http.post(url, [body], [options])

• url: 必需，请求目标url
• body: 非必需，作为请求体发送的数据
• options：非必需，作为请求体发送的数据

this.$http.post('https://developer.duyiedu.com/vue/setUserInfo', {
name: this.name,
mail: this.mail
})
.then(res => {
console.log(res);
})
.catch(error => {
console.log(error);
})

GET请求

获取数据

使用方法：vm.$http.get(url, [options])

this.$http.get('https://developer.duyiedu.com/vue/getUserInfo')
.then(res => {
console.log(res);
})
.catch(error => {
console.log(error);
})

在get请求时传参：

this.$http.get('https://developer.duyiedu.com/vue/getUserInfo' {
params: {
id: 'xxx'
}
})
.then(res => {
console.log(res);
})
.catch(error => {
console.log(error);
})

PUT请求

更新数据，将所有的数据全都推送到后端
使用方法：vm.$http.put(url, [body], [config])

PATCH请求

更新数据，只将修改的数据全都推送到后端
使用方法：vm.$http.patch(url, [body], [config])

DELETE请求

删除数据
使用方法：vm.$http.delete(url, [config])

HEAD请求

请求头部信息
使用方法：vm.$http.head(url, [config])

JSONP请求

除了jsonp以外，以上6种的API名称是标准的HTTP方法。


使用方法：vm.$http.jsonp(url, [options]);

this.$http.jsonp('https://developer.duyiedu.com/vue/jsonp').then(res => {
this.msg = res.bodyText;
});
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
params: {
wd: 'nn',
},
jsonp: 'cd', //jsonp默认是callback,百度缩写成了cb，所以需要指定下 
})
.then(res => {
console.log(res);
})

options 参数说明

响应对象

通过如下属性和方法处理一个请求获取到的响应对象：

属性

方法

以json()为例：

this.$http.get('https://developer.duyiedu.com/vue/getUserInfo')
.then(res => {
return res.json();
})
.then(res => {
console.log(res);
})

最后的话

很不幸，Vue官方已不再维护这个库了 这个只做了解

最后

以上就是壮观冷风为你收集整理的Vue --- vue-resourcevue-resource的全部内容，希望文章能够帮你解决Vue --- vue-resourcevue-resource所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。