vue $http请求服务

清疚 2022-05-22 02:14 255阅读 0赞

想获取更多的前端技术-请专注公众号：**胖梅web前端**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70][]

vue中的$http服务  需要引入一个叫vue-resource.js的文件，因为vue.js中没有$http服务。如果需要使用这个服务去百度下载vue-resource.js 然后引进项目即可

引入单个vue的时候 可以使用 vue-resource.js的文件实现交互效果

**搭建vue项目的时候，我们一般用  [axios][] **

Vue 原本有一个官方推荐的 ajax 插件 [vue-resource][]，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource

目前主流的 Vue 项目，都选择 [axios][] 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据

后期会更新 axios以及项目搭建

## **get方法** ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="js/vue.js"></script>
    		<script src="vue-resource.js"></script>
    	</head>
    	<body>
    		
    		<div id="app">
    			
    			<button @click='get()'>点击</button>
    			
    			
    		</div>
    		<script>
    			var vm=new Vue({
    				el:'#app',
    				data:{},
    				methods:{
    					get:function(){
    							//get请求 需要向后台传参数 语法：{params:{a:10,b:2}}
    							//this.$http.get('get.php',{params:{a:10,b:2}}).then(function(res){}
    						this.$http.get('get.php',{params:{a:10,b:2}}).then(function(res){
    							console.log(res);
    							console.log(res.data);
    						},function(res){
    							console.log('失败')
    						})
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

get.php文件：

<?php  
$a=$\_GET\['a'\];  
$b=$\_GET\['b'\];  
echo $a-$b;  
?>

get方法有两个参数get("PHP文件"，“参数”)

## post方法： ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="js/vue.js"></script>
    		<script src="vue-resource.js"></script>
    	</head>
    	<body>
    		
    		<div id="app">
    			
    			<button @click='post()'>点击</button>
    			
    			
    		</div>
    		<script>
    			var vm=new Vue({
    				el:'#app',
    				data:{},
    				methods:{
    					post:function(){
    						//post方法有三个参数post("php文件"，"参数","emulateJSON:true")
    				//emulateJSON:true  模拟一个JSON数据发送到服务器，这样才可以成功运行 
    						this.$http.post('post.php',{a:10,b:2},{emulateJSON:true}).then(function(res){
    							console.log(res);
    							console.log(res.data);
    						},function(res){
    							console.log('失败')
    						})
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

**post.php:**

<?php  
$a=$\_POST\['a'\];  
$b=$\_POST\['b'\];  
echo $a+$b;  
?>

post方法有三个参数post("php文件"，"参数","emulateJSON:true"

1.  emulateJSON:true  模拟一个JSON数据发送到服务器，这样才可以成功运行

这样放在服务器环境下就可以运行了，我用的是phpstudy

=======================================

模拟接口数据---显示到页面上

data.json数据

{
    	"total":"4",
    	"data":[
    		{
    			"name":"三国演义",
    			"category":"文学",
    			"desc":"一个军阀混战的年代"
    		},{
    			"name":"水浒传",
    			"category":"文学",
    			"desc":"草寇or英雄好汉"
    		},{
    			"name":"西游记",
    			"category":"文学",
    			"desc":"妖魔鬼怪牛鬼蛇神什么都有"
    		},{
    			"name":"红楼梦",
    			"category":"文学",
    			"desc":"一个封建王朝的缩影"
    		}
    	],
    	"obj":{"adf":"adf"}
    }

解析数据  get请求

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="js/vue.js"></script>
    		<script src="js/vue-resource.js"></script>
    	</head>
    	<body>
    		
    		<div id="app">
    			
    			<button @click='get()'>点击请求显示数据</button>
    			
    			
    			<ul>
    				<li v-for='(item,index) in arr'>{
       {item.name}} {
       {item.desc}}</li>
    			</ul>
    			
    		
    		</div>
    		
    		<script>
    			var vm=new Vue({
    				el:'#app',
    				data:{
    					//声明变量 存数据   $http 请求的数据
    					arr:[],
    				},
    				methods:{
    					get:function(){
    						//get　请求数据  没有传参  模拟数据json　
    						this.$http.get('data.json').then(function(res){
    							console.log(res);
    							// .data  数据
    							console.log(res.data)
    							console.log(res.data.data);
    							//数据res.data.data  给一个变量
    							this.arr=res.data.data;
    														
    						},function(){
    							alert("失败")
    						})
    					}
    				}
    				
    			})
    			
    			
    		</script>
    	</body>
    </html>

显示页面效果：

![20180613115805588][]

可以练习显示数据：

![2018061312001013][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70]: /images/20220522/c5f0b88c072740f3af3c42d082644f83.png
[axios]: https://github.com/mzabriskie/axios
[vue-resource]: https://github.com/pagekit/vue-resource
[20180613115805588]: /images/20220522/be2dce7278f449dd88893fe1b9b1a7f7.png
[2018061312001013]: /images/20220522/c88d3b147c524df4a3ce1244df1dc0fd.png