前端Vue自学之axios 2020/12/9

学习目标:

掌握axios

学习笔记:

一、axios


二、axiso的基本使用 axios是基于promise对ajax的一种封装 ajax mvc axios mvvm`
//使用默认方式发送无参请求 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>    
	axios({        
		url:'http://localhost:9999/student/student/getAllStudent'    
		}).then(res=>{
		console.log(res);    
		}) 
</script> 默认使用 get方式进行请求
//axios发送get方式的有参请求 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>   
	axios({       
		url:'http://localhost:9999/student/student/findStudentById?id=1'
		}).then(res=>{ 
		console.log(res);   }); 
</script>
//axios发送get方式请求其他形式 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>   
		axios({       
		url:'http://localhost:9999/student/student/findStudentById',
		params:{           
		id:'1'       
		}   
		}).then(res=>{       
		console.log(res);   
		}); 
</script>

axiso发送post请求

//使用post方式发送无参请求 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>    
		axios({        
		url:'http://localhost:9999/student/student/pGet',        
		method:'post'    
		}).then(res=>{        
		console.log(res);    
		})
</script>

 
三、axios请求方式 
 
//使用axios发送带有参数的post请求 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>   
		axios({       
		url:'http://localhost:9999/student/student/findStudentByName',       
		method:'post',       
		params:{           
		name:'张三' //url上拼接上name参数 ?name=张三       
		}   
		}).then(res=>{       
		console.log(res);   
		}); 
</script>
//使用axios发送带有参数的post请求 使用data传递 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>   
		axios({       
		url:'http://localhost:9999/student/student/findStudentByName',       
		method:'post',       
		data:{           
		name:'张三' //后台接收为null       
		}   
		}).then(res=>{       
		console.log(res);   
		}); 
</script> 
后台控制器接收到的name null axios使用post携带参数请求默认使用application/json 
解决方式一: params属性进行数据的传递 
解决方式二: "name=张三" 
解决方式三: 服务器端给接收的参数加上@requestBody

三、axios请求方式

//使用axios.get方式发送无参请求 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>    
		axios.get('http://localhost:9999/student/student/getAllStudent'
		).then(res=>
		{console.log(res);    
		}).catch(err=>{        
		console.log(err);    
		}) 
</script>
//使用axios.get发送有参请求 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>    
		axios.get('http://localhost:9999/student/student/findStudentById',
		{params: {id:1}
		}).then(res=>{        
		console.log(res);    
		}).catch(err=>{        
		console.log(err);    
		}) 
</script>

//使用axios.post无参请求 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>   
		axios.post('http://localhost:9999/student/student/pGet'
		).then(res=>{       
		console.log(res);   
		}).catch(err=>{       
		console.log(err);   
		}) 
</script>
//使用axios.post发送有参请求 只修改前端代码 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>    
		axios.post('http://localhost:9999/student/student/findStudentByName',
		"name=张三 &age=10"
		).then(res=>{        
		console.log(res);    
		}); 
</script> 
//发送post请求携带参数 直接试用"name=张三&age=10"
 
//使用data传递数据 后台需要将axiso自动装换的json数据装换为java对象 //修改后台代码 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
		<script>    
		axios.post('http://localhost:9999/student/student/findStudentByName',
		{name:'张 三'}
		).then(res=>{        
		console.log(res);    
		}); 
</script> 
//接收参数添加@requestBody注解

四、axios的并发请

//axios的并发请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script>   
		axios.all([       
		axios.get('http://localhost:9999/student/student/getAllStudent'),
		axios.get('http://localhost:9999/student/student/findStudentById',
		{params:{id:1}})   
		]).then(res=>{//请求成功响应的是一个数组       
		console.log(res[0]);       
		console.log("----------");       
		console.log(res[1]);   
		}).catch(err=>{       
		console.log(err);   
		}) 
</script>

//使用spread方法处理响应数组结果 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>   
		axios.all([       
		axios.get('http://localhost:9999/student/student/getAllStudent'),
		axios.get('http://localhost:9999/student/student/findStudentById',
		{params:{id:1}})   
		]).then(       
		axios.spread((res1,res2)=>{           
		console.log(res1);           
		console.log(res2);       
		})   
		).catch(err=>{       
		console.log(err);   
		}) 
</script>

五、axiso的全局配

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>    
		axios.defaults.baseURL='http://localhost:9999/student/student';
		//配置全局属性    
		axios.defaults.timeout=5;        
		axios.get('getAllStudent').then(res=>{ 
		//在全局配置的基础上去网络请求        
		console.log(res);    
		});    
		axios.post('pGet').then(res=>{        
		console.log(res);    
		}).catch(err=>{        
		console.log(err);    
		}) 
</script>

六、axiso的实例

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>    
let newVar = axios.create({        
baseURL:'http://localhost:9999/student/student',        
timeout:5000    
});
//创建axios的实例
 
    let newVar1 = axios.create({        
    baseURL:'http://localhost:9999/student',        
    timeout:5000    
    });
    //创建axios的实例
 
    newVar({        
    url:'getAllStudent'    
    }).then(res=>{        
    console.log(res);    
    })
 
    newVar1({        
    url:'student/getAllStudent'    
    }).then(res=>{        
    console.log(res);    
    }).catch(err=>{        
    console.log(err);    
    })	
</script

七、axios的拦截
axios给我们提供了两大类拦截器 一种是请求方向的拦截(成功请求,失败的) 另一种是响应方向的(成功的 失败的)
拦截器的作用 用于我们在网络请求的时候在发起请求或者响应时对操作进行响应的处理 发起请求时可以添加网页加载的动画 强制登录 响应的时候可以进行相应的数据处理

//请求方向拦截器 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>    
		axios.interceptors.request.use(config=>{        
		console.log("进入请求拦截器");        
		console.log(config);        
		return config;//放行请求    
		},err=>{        
		console.log("请求方向失败");        
		console.log(err);    
		});
     	axios.get("http://localhost:9999/student/student/getAllStudent"
     	).then(res=>{        
     	console.log(res);    
     	})
</script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>    
		axios.interceptors.response.use(config=>{        
		console.log("进入响应拦截器");
	    return config.data;    
        },err=>{        
        console.log("响应方向失败");        
        console.log(err);    });
	    axios.get("http://localhost:9999/student/student/getAllStudent"
	    ).then(res=>{        
	    console.log(res);    
	    })
</script>

八、axios在vue中的模块封装

//封装位置 文件绝对位置./network/request/request.js 
import axios from 'axios' 
	export function request(config,success,fail) {    
		axios({        
		url:config    
		}).then(res=>{        
		success(res);    
		}).catch(err=>{        
		fail(err);    
		}) 
} 
		
//调用者位置 
import {request} from './network/request/request' 
		request('http://localhost:9999/student/student/getAllStudent'
		,res=>{  
		console.log(res); 
		},err=>{  
		console.log(err); 
		})
//封装位置 
export function request(config){
		axios.defaults.baseURL="http://localhost:9999/student/student";
	   axios(config.url    
	   ).then(        
	   res=>{            
	   config.success(res);        
	   }    
	   ).catch(err=>{        
	   config.fail(err);    
	   }) 
} 
//调用者位置 
	   import {request} from './network/request/request' 
	   request({  url:'getAllStudent',  s
	   uccess:res=>{    
	   console.log(res);  
	   },  
	   fail:err=>{    
	   console.log(err);  
	   }}
	   )
//封装的位置 
export function request(config){ 
		return new Promise((resolve, reject) => {        
		let newVar = axios.create({            
		baseURL:"http://localhost:9999/student/student",            
		timeout:5000        
		});        
		newVar(config).then(res=>{            
		resolve(res);        
		}).catch(err=>{            
		reject(err);        
		})    
	}) 
}
 
//调用位置 
import {request} from './network/request/request' 
		request({  url:'getAllStudent' }).then(res=>{  
		console.log(res); 
		}).catch(err=>{  
		console.log(err); 
		})
//封装位置 
		export function request(config){ 
		let newVar = axios.create({        
		baseURL:"http://localhost:9999/student/student",
		        timeout:5000
		    });    
	    return newVar(config); 
	    
//调用者    
	    import {request} from './network/request/request'    
	    request({        
	    url:'getAllStudent'            
	    }).then(res=>{            
	    console.log(res);        
	    	})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vue1024

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值