之前的笔记说axios没有办法处理跨域问题,所以就引入了vue-resource。使用jsonp来解决跨域问题.

   vue-resource的基本用法:

    

  • get(url, [options])
  • head(url, [options])
  • delete(url, [options])
  • jsonp(url, [options])
  • post(url, [body], [options])
  • put(url, [body], [options])
  • patch(url, [body], [options])

  参考下载文档地址:https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

    跨域搜索360搜索案例:

    代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/vue-resource/vue-resource.js" ></script>
		<script type="text/javascript">
			window.onload = function(){
				new Vue({
					el:"#main",
					data:{},
					methods:{
						sendJSONP1:function(){
							//
							this.$http.jsonp("https://sug.so.360.cn/suggest",{
								params:{
									word:'a'
								}
							}).then(resp=>{
								console.log(resp.data.s);
							},response => {
    							console.log("发送失败"+response.status+","+response.statusText);
  							});
						}
					}
				});
			}
			
		</script>
	</head>
	<body>
		<div id="main">
			<button type="button" @click="sendJSONP1">向360搜索发送请求</button>
		</div>
	</body>
</html>

注:this.$http 在引入vue-resource.js 之后,在你创建vue实例的时候就会有$http属性来完成vue发送http请求的需求。具体的可以参考AIP文档。

运行结果:

 




Logo

前往低代码交流专区

更多推荐