回调地域之解决回调地域

最新推荐文章于 2025-01-08 08:50:06 发布

南城旧时

最新推荐文章于 2025-01-08 08:50:06 发布

阅读量523

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52006046/article/details/127895002

本文探讨了回调地域的概念，即在多层嵌套回调函数中导致的复杂性和错误易发性。通过示例展示了如何使用Promise改造回调函数，利用.then链式调用来避免回调地狱。此外，还介绍了async/await语法，它允许更简洁的异步代码编写，用await替代.then。通过这两个方法，可以有效优化和简化异步操作，提高代码可读性和维护性。

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

什么是回调地域?

概念:

在回调函数内, 再嵌套回调函数, 一直嵌套下去形成了回调地狱

特点:

发多次ajax请求
后一次请求要依赖上一次请求的结果

示例

			axios.get('http://ajax-api.itheima.net/api/province').then((res) => {
				const resData = res.data.data[5]
				console.log(resData)

				axios
					.get('http://hmajax.itheima.net/api/city' + `?pname=${resData}`) //依赖上一次请求的结果
					.then((res) => {
						const resData1 = res.data.list[0]
						console.log(resData1)

						axios
							.get(
								'http://hmajax.itheima.net/api/area' +
									`?pname=${resData}&cname=${resData1}` ////依赖上一次请求的结果
							)
							.then((res) => {
								const resData3 = res.data.list
								console.log(resData3)
							})
					})
			})

如何解决回调地域?

方法1:promise改造回调地域

原理:

为什么要用promise来去解决回调地域,回调地域的结构是不断嵌套一旦嵌套太多容易出错且出错之后不好定位.promise来解决,promise的结构是不断的.then.then…是并列的状态,若果出错会直接卡到某个.then执行最后面的catch.

步骤:

		// 使用promise改造回调函数
		// 	第一步：建立模板函数。这里的模板函数是指固定的套路：写一个空函数，在函数体中new 一个promise对象，并返回。
		// 第二步：把异步功能写入构造函数中，根据实际来决定是否调用resolve,reject。
		// 第三步：调用函数。通过fnName().then().catch() 结构来调用这个函数。

示例:

			let pname = ''
			axios
				.get('http://ajax-api.ith.net/api/province')
				.then((res) => {
					pname = res.data.data[5] //获得第五个省
					// console.log(pname)
					return axios.get(`http://ajax-api.it.net/api/city?pname=${pname}`) //请求第五个省里面的市数据
				})
				.then((res) => {
					let cname = res.data.data[0] //获得第五个省的第1个市
					// console.log(cname)

					return axios.get(
						`http://ajax-api.it.net/api/area?pname=${pname}&cname=${cname}` //请求第五个省里面的第1个市数据
					)
				})
				.then((res) => {
					let area = res.data.data //获得第五个省的第1个市的里面的区
					// console.log(area)
				})
				.then((res) => {
					// console.log(res)
				})
				.catch((err) => {
					console.log('这里有错误', err)
				})

方法2:asnyc+await优化回调地狱

原理:

用await用来代替.then来promise的值.

示例:

	axios.defaults.baseURL = 'http://ajax-api.it.net'
	async function fn() {
		const provinces = await axios.get('/api/province') //await用来代替.then来返回  axios.get('/api/province')这个promise的值
		// console.log(provinces)
		const pname = provinces.data.data[5]
		// console.log(pname)

		const citys = await axios.get(`/api/city?pname=${pname}`)
		// console.log(citys)
		const cname = citys.data.data[0]
		// console.log(cname)

		const areas = await axios.get(
			`/api/area?pname=${pname}&cname=${cname}`
		)
		const area = areas.data.data
		// console.log(area)
		return area
	}
	fn() //调用

	const resArea = fn()

	resArea.then((res) => {
		console.log(res)
	})