【面试题】如何消除异步的传染性

最新推荐文章于 2025-04-17 21:37:54 发布

MaxLoongLvs

最新推荐文章于 2025-04-17 21:37:54 发布

阅读量1.1k

点赞数

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/shadowfall/article/details/129323739

版权

文章讨论了在JavaScript中如何消除异步操作的传染性，即在使用async和await时避免整个调用链都变得异步。作者提出在源头处理，通过同步化异步动作并引入缓存机制，利用抛出异常的方式来实现。文中提供了一个名为eliAsync的函数示例，它重写了window.fetch方法，实现了请求的缓存和异常处理，从而在调用链中消除异步影响。

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

背景

我们在开发过程中都知道,如果要使用async 和 await 语法糖必须在函数使用的链路上全部都要使用async 和 await, 不够优雅,那么有什么办法可以消除异步的传染性呢?

常见使用方式

const getdata = async () => {
	const res = await fetch(url).then( response=>console.log(response))
}

const fn1 = async () => {
	await getdata()
}

const fn2 = async () => {
	await fn1()
}

const fn3 = async () => {
	await fn2()
}

fn3()

消除异步传染性

那么如何消除异步的传染性呢? 思路: 很明显必须在源头进行处理, 否则在链路的任意一环处理都不可能消除, 那么如何处理呢? 在请求的时候会有延迟,那么只有将异步的动作同步化,然后增加缓存才能解决异步的传染性, 也就是使用抛出异常的方式来解决该问题

	function getdata() {
	 	return fetch('./data.json');
	}
	  function m1() {
	      return getdata();
	  }
	  function m2() {
	      return m1();
	  }
	  function m3() {
	      return m2();
	  }
	  function main() {
	      const data = m3();
	      console.log(data);
	  }
	function eliAsync(func) {
		let cache = [];
		let i = 0;
		const _originalFetch = window.fetch;
		window.fetch = (...args) => {
			if(cache[i]) {
				if(cache[i].status === 'fulfilled') {
					return cache[i].data;
				} else if(cache[i].status === 'rejected') {
					throw cache[i].err;
				}
			}
			const result = {
				status: 'pending',
				data: null,
				err: null
			};
			cache[i++] = result;
			const prom = _originalFetch(...args).then(resp => resp.json()).then(res => {
				 result.status = 'fulfilled';
                 result.data = res;
			}, err => {
				reslut.status = 'rejected';
				result.err = err;
			});
			
			throw prom;
			
		}
			try {
				func();
			} catch(err) {
				if(err instanceof Promise) {
					const reRun = () => {
						i = 0;
						func();
					}
					err.then(reRun, reRun);
				}
			}
	};
eliAsync(fn3);