1. Axios优化

1.1 回调地狱

1.1.1 概念讲解

业务中经常遇到A的数据来源B,B的数据来源C.以此类推, 则形成了Ajax嵌套的结构. 如代码所示:

<script>
			axios.defaults.baseURL = "http://localhost:8080"
			
			/**
			 * 需求: 
			 * 	 1.发送第一个ajax请求之后得到的结果 
			 * 		当做第二个ajax的参数
			 */
			
			let user = {id:100, name:"tomcat猫", age: 20}
			axios.post("/axios/saveUser",user)
				 .then(function(promise){
					 console.log(promise.data)
					 let arg1  = promise.data
					 /* 第二个ajax*/
					 axios.post("/axios/xxxx",arg1)
						  .then(function(promise2){
							  console.log(promise2.data)
							  
							  let arg2 = promise2.data
							  axios.post("/axios/xxx2",arg2)
									.then(function(promise3){
										console.log(promise3.data)
									})
						  })
				 })
		</script>

上述的结构称之为回调地狱问题.

1.1.2 回调地狱问题说明

由于Ajax不断的嵌套,导致代码的耦合性高,不便于维护.

如何解决问题: 将Ajax的请求由2行,变为一行.

1.1.3 回调地狱优化-async-await

规则:
1. async 控制同步异步 标识函数
2. await 标识Ajax请求

<script>
			axios.defaults.baseURL = "http://localhost:8080"
			
			/**
			 * 1.定义一个函数
			 * 规则: 
			 * 		1. async 标识函数
			 * 		2. await 标识请求
			 * 		3. 2者必须同时出现
			 * 		4. 可以直接获取then中的回调对象promise
			 */
			async function saveUser(){
				let user = {id: 100,name:"春节已过!!!"}
				let promise = await axios.post("/axios/saveUser",user)
				console.log(promise.data)
			}
			
			/* 2.调用函数 */
			saveUser()
</script>