能打开网站的浏览器_战神王爷手撕白莲花_跨境电商网站开发_文件外链

以下两个方法，区别只在有没有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() 这样的异步方法给外部使用
如果调用了接口，还捕获了异常，就要对返回结果进行空处理

最近实践是

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