js中的await与async的使用

以下两个方法，区别只在有没有catch，使用的时候却要注意

// 封装请求方法，同步loading状态出去
export const fetchWithLoading = async (fn: Function, params: any, loading: Ref) => {
	loading.value = true;
	try {
		return await fn(params);
	} finally {
		loading.value = false;
	}
};

// 封装请求方法，同步loading状态出去
export const fetchWithLoading2 = async (fn: Function, params: any, loading: Ref) => {
	loading.value = true;
	try {
		return await fn(params);
	} catch (err) {
		ElMessage({
			type: 'error',
			message: 'fetchWithLoading请求失败',
		});
	} finally {
		loading.value = false;
	}
};

调用

  ctx.tableData = await fetchWithLoading(SqlQueryApi.queryData, { }, loading)
  console.log(ctx.tableData[0]); // 使用fetchWithLoading时，fetchWithLoading内报错后不会执行这里的代码，程序正常
  
  ctx.tableData = await fetchWithLoading2(SqlQueryApi.queryData, { }, loading)
  console.log(ctx.tableData[0]); // 使用fetchWithLoading2时，fetchWithLoading内报错后ctx.tableData为空，执行这段代码会导致js报错

调用await fetchWithLoading()，如果内部报错，则不会继续执行下面的代码console.log
调用await fetchWithLoading2()，如果内部报错，则会继续执行console.log，导致出现运行时错误

敲黑板

await是做异步转同步，我们默认应该认为await 内部如果报错，代码会中断，不会继续执行
所以不应该写出例子中的 fetchWithLoading2() 这样的异步方法给外部使用
如果调用了接口，还捕获了异常，就要对返回结果进行空处理

最近实践是

编写异步方法要处理数据异常，数据异常时不要返回
调用异步方法不用处理捕获异常