Vue-resource jsonp请求

Vue-resource jsonp请求教程

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

Vue-resource jsonp请求详解

语法

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

参数

参数	描述
jsonp	我们需要发送的是 Vue-resource jsonp 请求。
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 窗口，如下图：

08 vueresource data.png

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

09 vueresource data.png

我们在命令行，输入以下命令，启动 json-server：

json-server --watch db.json

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

案例

Vue-resource jsonp请求

使用 Vue-resource jsonp 请求，获取数据

<!DOCTYPE html>
<html>
<head>
	<title>Vue-resource jsonp请求</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="jsonp请求" @click='jsonpInfo'>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
        el : '#app',
        data:{
        	msg: "嗨客网"
        },
        methods:{
        	jsonpInfo() {
                //通过jsonp方法的第三个参数，设置提交的内容类型为普通表单数据格式
        		this.$http.jsonp('http://localhost:3000/Server').then(function(result){
        			//通过 result.body 拿到服务器返回的成功的数据
        			console.log(result.body);
        		})
        	}
        }
    });
</script>
</html>

我们点击按钮，向 Json-Server 发送请求，请求成功后，浏览器输出如下内容：

10 vueresource jsonp.png

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

Vue-resource jsonp请求总结

Vue-resource jsonp 请求语法格式为：

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