【Vue学习总结】12.使用vue-resource请求网络数据

接上篇《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