关于回调地狱问题_axios的耦合性-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45341429/article/details/122814080

回调地狱是指在JavaScript中，特别是使用Axios进行API调用时，由于多个回调函数嵌套导致的代码复杂性和可读性降低的问题。这种情况下，如果一个请求失败，整个链式调用都会中断。解决回调地狱的方法包括使用async/await语法，将异步操作转换为更易于理解和管理的形式，提高代码的可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于回调地狱问题

什么是回调地狱

回调地狱问题说白了是Axios中的代码耦合性问题.

回调地狱我们拆开来讲,首先大家都知道什么是回调函数,通过回调函数,用户可以获得后端返回的数据,大家也都知道什么是"地狱",地狱十八层,一层套一层,回调函数怎么会和地狱扯上关系?我们通过代码演示一下

<script>
			axios.defaults.baseURL = "http://localhost:8080";
			
			let user = {id: 10,name:"cat"}
			axios.post("/axios/saveUser",user)
				 .then(function(promise){
					 console.log(promise)
					 let args = promise.data
					 // 地二层地狱
					 axios.post("xxxx").then(function(promise2){
						 console.log(promise2)
						 let args2 = promise2.data
						 // 第三层地狱
						 axios.post("yyyy").then(function(promise3){
							 console.log(promise3)
							 let args3 = promise3.data
							 // 第N层地狱
						 })
					 })
				 })
		</script>

通过上述代码我们不难发现,假如一个回调函数作为另一个回调函数的参数,那么就会形成axios嵌套,如果某一层的代码出现了问题,那么就运行不通过了,这样的代码耦合性太高了,所以是需要优化的.

回调地狱的解决办法

1.使用async标注函数

2.使用await标注axios

通过代码看一下

axios.defaults.baseURL = "http://localhost:8080";

			async function saveUser(){
				let user = {id:20.name:"dog"}
				let promise = await axios.post("/axios/saveUser",user)
				console.log(promise.data)
			}
			
			saveUser()

这样就不用通过.then获取promise对象了,axios被await标注后直接就可以获得promise对象,这样就可以松耦合了.