2.网络慢导致异步请求超时。
try { // 获取列表list const list = await getList(params) // 获取单个详情 const info = await getListById(list[0]?.id) } catch {}前一个异步请求的返回结果,会作为后一个异步请求的请求参数使用,所以一旦前一个请求异常,后面的请求肯定会异常,所以需要添加 try-catch 处理。
loading.value = true try { // 堆代码 duidaima.com // 获取列表list const list = await getList(params) } finally { loading.value = false }一般我们处理异步请求前,会为其添加 loading 状态,而一旦请求异常出现时,如果不加 try-catch 时就会导致页面一直处于 loading 状态。所以需要在finally中将 loading 状态置为 false,catch中处理时需要外部再处理一次。
loading.value = true let res = await getList().catch(() => (loading.value = false)) if (!res) return // 请求成功后正常操作await-to-js 处理函数
/** * @param { Promise } promise * @param { Object= } errorExt - Additional Information you can pass to the err object * @return { Promise } */ export function to<T, U = Error>( promise: Promise<T>, errorExt?: object, ): Promise<[U, undefined] | [null, T]> { return ( promise.then < [null, T] > ((data: T) => [null, data]).catch < [U, undefined] > ((err: U) => { if (errorExt) { const parsedError = Object.assign({}, err, errorExt); return [parsedError, undefined]; } return [err, undefined]; }) ); } export default to;大致流程如下: 函数to接受参数Promise和errorExt,如果这个 Promise 成功时返回[null, data],如果异常时会判断是否带有errorExt参数(代表传递给 err 对象的附加信息),如果有时会与 catch 捕获的 err 合并返回,如果没有时返回[err, undefined]。
# use npm npm i await-to-js --save # use yarn yarn add await-to-js使用
import to from 'await-to-js'; // 获取列表list const [err, data] = await to(getList(params)); if (err) return; // 获取单个详情 const info = await to(getListById(list[0]?.id));通过to函数改造后,如果返回第一个参数不为空时,说明该请求报错,就可以提前 return 出去,如果不存在第一个参数时,则异步请求成功。