嗨客网搜索
Vue计算属性(computed)
Vue-resource GET请求

Vue-resource GET请求教程

Vue-resource 可以发送 HTTP 的 GET 请求,用于获取一条数据。

Vue-resource get请求详解

语法

this.$http.get(url, [options]).then(successCallback, errorCallback)

参数

参数 描述
get 我们需要发送的是 Vue-resource get请求。
successCallback 请求成功后调用的回调函数。
errorCallback 请求失败后调用的回调函数,这个回调是可选的。

Vue-resource数据准备

首先,我们在 E:\workspace 目录,创建一个 db.json 文件,输入以下内容:

{ "JavaScript":[ { "id": 1, "category":"ES6", "author": "HaiCoder1" }, { "id": 2, "category":"Vue", "author": "HaiCoder2" } ], "Server":[ { "id": 1, "category":"Docker", "author": "HaiCoder3" }, { "id": 2, "category":"Golang", "author": "HaiCoder4" }, { "id": 3, "category":"Python", "author": "HaiCoder5" } ] }

接着,我们在该目录的地址栏,输入 cmd,打开 cmd 窗口,如下图:

01 vueresource data.png

输入 cmd 之后,直接回车,即可在此目录打开命令行,如下图所示:

02 vueresource data.png

我们在命令行,输入以下命令,启动 json-server:

json-server --watch db.json

更过有关 JsonServer 的使用,请参考前面的 JsonServer 教程

案例

Vue-resource get请求

使用 Vue-resource get 请求,获取一条数据

<!DOCTYPE html> <html> <head> <title>Vue-resource get请求</title> <script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script> <!-- 使用 cdn 的方式引入 vue-resource, vue-resource 依赖 vue,所以引入的时候需要先引入 vue --> <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> </head> <body> <div id="app"> <input type="button" value="Get请求" @click='getInfo'> <p>嗨客网(www.haicoder.net)</p> </div> </body> <script type="text/javascript"> var vm = new Vue({ el : '#app', data:{ msg: "嗨客网" }, methods:{ getInfo() { this.$http.get('http://localhost:3000/JavaScript').then(function(result){ //通过 result.body 拿到服务器返回的成功的数据 console.log(result.body); }) } } }); </script> </html>

我们点击按钮,向 JsonServer 发送请求,请求成功后,浏览器输出如下内容:

03 vueresource get.png

我们通过 Vue-resource 发送了 HTTP 的 GET 请求,在成功的回调函数中,使用 result.body 的方法获取服务器返回的数据。

Vue-resource get请求总结

Vue-resource get 请求语法格式为:

this.$http.get(url, [options]).then(successCallback, errorCallback)
嗨客网顶部