接上篇《11.Vue中组件的生命周期函数》
上一篇我们主要讲解了vue的组件的生命周期函数,本篇我们来聊一聊如何使用vue-resource实现网络请求。
本系列博文使用的Vue版本:2.6.11
一、请求网络数据
做过前后端分离开发的同学都知道,前端从后端异步获取数据,都是通过ajax的方式,向后端服务地址发送get或post的请求,拿到回复后做后续的操作。那么在vue中,我们向后端请求参数,同样使用ajax的方式,我们可以使用一些组件,来实现ajax的网络请求。
在vue中,常用的网络组件有三种,一种是vue-resource库,一种是axios,另外一种是fetch-jsonp,本篇我们着重来讲一下vue-resource库。
二、vue-resource简介和安装
vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。vue-resource插件除了能实现和之前常用的$.ajax的相同的功能,还提供了更为简洁的API。
我们可以访问vue-resource的github首页(https://github.com/pagekit/vue-resource),可以看到该插件的开源代码,以及其安装和使用方法:
上面可以看到提供的安装指令,和一个具体使用的样例。
我们打开编译器,在之前项目的控制台(默认定位在我们的工程目录中),输入“npm install vue-resource”指令来安装vue-resource:
这里我们添加了一个“--save”的参数,该参数会将引入vue-resource依赖的语句写入到项目的打包文件package.json中,这样下一次打包时会强制引入vue-resource,防止依赖不全导致一些问题。
安装完成之后,我们可以看到“--save”参数也起了作用,vue-resource的依赖被写入package.json的“dependencies”部分了:
安装完成后,我们要在项目中引用该插件,此时我们到项目的主组件中,引入vue-resource作为我们的新插件:
这里使用import语句(import VueResource from 'vue-resource';),来引入vue-resource插件,命名为“VueResource”。然后下面使用“Vue.use(VueResource);”就启用了我们的vue-resource插件了。
然后我们就可以使用vue-resource进行网络请求了。
三、vue-resource的使用
我们来使用vue-resource进行网络请求。查看github上的说明,官方给了一个get请求的样例:
{
// GET /someUrl
this.$http.get('/someUrl').then(response => {
// get body data
this.someData = response.body;
}, response => {
// error callback
});
}
可以看到,和ajax类似,在get方法中放入要请求的API的url地址,在回调函数“then”中,就可以获取反馈对象response的数据,如果调用异常,则跳入第二个方法。我们来试验一下。
注:上面的“response =>{}”是ES6的写法,相当于“function(response){}”。
备份之前的App.vue页面,重新编写一个新的App.vue页面,在页面上放置一个按钮,实现点击按钮后请求一个API接口,获取返回的信息,显示在页面上:
<template>
<!-- vue的模板里面,所有的内容都需要被一个根节点包裹起来 -->
<div id="app">
<h2>{{msg}}</h2>
<button @click="getData()">请求数据</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: '你好,vue'
}
},methods:{
getData(){
var api_url="http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz&city=%E5%8C%97%E4%BA%AC";
this.$http.get(api_url).then(response =>{
console.log(response);
},err =>{
console.log(err);
}
)
}
}
}
</script>
<style>
</style>
这里我们请求的是北京的天气情况,使用的是一个开放的免费数据接口。我们在获取到数据之后,将获取到的json信息打印在浏览器的控制台上,测试结果:
然后我们修改一下代码,获取结果中的data数据,把北京七天的天气在页面上遍历出来:
<template>
<!-- vue的模板里面,所有的内容都需要被一个根节点包裹起来 -->
<div id="app">
<h2>{{msg}}</h2>
<button @click="getData()">请求数据</button>
<br/><hr/>
<ul>
<li v-for="item in list">
{{item.date}}- {{item.week}}- {{item.wea}}- {{item.tem}}°C
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: '你好,vue',
list:[]
}
},methods:{
getData(){
var api_url="http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz&city=%E5%8C%97%E4%BA%AC";
this.$http.get(api_url).then(response =>{
console.log(response);
this.list=response.body.data;
},err =>{
console.log(err);
}
)
}
}
}
</script>
<style>
</style>
效果:
实际上获取到body后,后面的写法是和处理普通ajax结果一样的,解析json,获取json对象的参数即可。
四、vue-resource的参数详解
刚刚我们成功使用了vue-resource进行了网络参数请求,这里我们来详细说明一下vue-resource的方法调用格式。
vue-resource支持所有的http请求格式(get、post、put、detete、head、patch),以及解决同源策略的跨域请求jsonp,请求格式如下:
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
this.$http.put('/someUrl', [body], [options]).then(successCallback, errorCallback);
this.$http.delete('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.head('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.patch('/someUrl', [body], [options]).then(successCallback, errorCallback);
this.$http.jsonp('/someUrl', [options]).then(successCallback, errorCallback);
注:基于全局Vue对象使用“Vue.http.”,在一个Vue实例内使用“this.$http”。
详细的请求参数列表解释:
response对象的参数和提供的方法:
我们把刚刚的get请求天气的代码,将url的参数写在参数栏:
<template>
<!-- vue的模板里面,所有的内容都需要被一个根节点包裹起来 -->
<div id="app">
<h2>{{msg}}</h2>
<button @click="getData()">请求数据</button>
<br/><hr/>
<ul>
<li v-for="item in list">
{{item.date}}- {{item.week}}- {{item.wea}}- {{item.tem}}°C
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: '你好,vue',
list:[]
}
},methods:{
getData(){
var api_url="http://www.tianqiapi.com/api";
this.$http.get(api_url,{
params: {
version: 'v9',
appid:'23035354',
appsecret:'8YvlPNrz',
city:'北京'
}
}).then(response =>{
console.log(response);
this.list=response.body.data;
},err =>{
console.log(err);
}
)
}
}
}
</script>
<style>
</style>
测试后请求没有问题。
五、总结
使用vue-resource进行网络请求的步骤:
(1)安装vue-resource模块
npm install vue-resource --save
(2)main.js引入vue-resource
import VueResource from 'vue-resource';
Vue.use(VueResource);
(3)在组件中直接使用vue-resource
如使用get和post请求网络数据:
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
下一篇我们介绍另外两个网络请求组件,Axios和fetchJsonp。
参考:
《IT营:itying.com-2018年Vue2.x 5小时入门视频教程》
转载请注明出处:https://blog.csdn.net/acmman/article/details/108953681