js取代trycatch的方法封装

title: js取代try catch的方法封装 id: be2da0ff558c1f59f690e427396b0ab7 tags:

• 代码片段 date: 2024/04/02 11:02:13 updated: 2025/03/15 18:01:30 isPublic: true --#|[分隔]|#--

js取代try catch的方法封装

开发时，可能会担心自己调用的接口、执行的方法会报错，经常用 try catch 包起来，确保了程序执行的顺畅，但写法会比较累赘。

下面这两个方法内部使用 try catch，封装了执行结果，能让开发时敲代码更流程。

最终文件

这是使用包装完成的文件，utils/tryTo.ts

/**
 * 包装一个同步函数，代替try catch的包装
 * @param promiseHandler 传入的一个异步方法，只需要把方法传进来，此方法在内部执行，拦截报错
 * @returns 返回数组 [报错信息字符串 | null, 正常执行方法得到的返回值 | null, 报错对象 | 正常执行方法得到的返回值]
 */
export function tryTo<T>(handler: () => T): [string | null, T | null, any?] {
  try {
    const data = handler();
    return [null, data, data];
  } catch (error: any) {
    return [error?.message || '未知错误', null, error];
  }
}

/**
 * 包装一个异步函数，代替try catch的包装
 * @param promiseHandler 传入的一个异步Promise或异步方法，如果是异步Promise，此方法会等待执行结果；如果是异步方法，此方法会执行并等待结果
 * @returns 返回数组 [报错信息字符串 | null, 正常执行方法得到的返回值 | null, 报错对象 | 正常执行方法得到的返回值]
 */
export async function tryToAsync<T>(promiseHandler: Promise<T> | (() => (T | Promise<T>))): Promise<[string | null, T | null, any?]> {
  try {
    let data: T;
    if (typeof promiseHandler === 'function') {
      data = await promiseHandler();
    } else if (promiseHandler instanceof Promise) {
      data = await promiseHandler
    } else throw new Error('未知的入参类型')

    return [null, data, data];
  } catch (error: any) {
    return [error?.message || '未知错误', null, error];
  }
}

/**
 * 包装一个异步函数，代替try catch的包装 + 接口响应值处理
 * @param promiseHandler 传入的一个异步Promise或异步方法，如果是异步Promise，此方法会等待执行结果；如果是异步方法，此方法会执行并等待结果
 * @returns 返回数组 [报错信息字符串 | null, 正常执行方法得到的返回值 | null, 报错对象 | 正常执行方法得到的返回值]
 */
export async function tryToAsyncReq<T>(promiseHandler: Promise<T> | (() => (T | Promise<T>))): Promise<[string | null, T | null, any?]> {
  try {
    let data: T;
    if (typeof promiseHandler === 'function') {
      data = await promiseHandler();
    } else if (promiseHandler instanceof Promise) {
      data = await promiseHandler
    } else throw new Error('未知的入参类型')

    return getResult(data as Record<string, any>)
  } catch (error: any) {
    return getResult(error);
  }
}

/**
 * 传入请求返回的对象，比如 {"code":0,"msg":null,"data":true,"ok":true}
 * 这个方法会判断 code 是否为 0，返回对应的数据 data 或者错误信息 msg
 * @returns 返回数组 [报错信息字符串 | null, 正常执行方法得到的返回值 | null, 报错对象 | 正常执行方法得到的返回值]
 */
export function getResult<T>(resData: Record<string, any> | null): [string | null, T | null, any?] {
  try {
    if (resData?.code === 0) return [null, resData.data, resData]
    else return [resData?.msg || '请求出错', null, resData]
  } catch (error: any) {
    return [error?.message || '未知错误', null, error];
  }
}

使用举例

使用tryTo

// 将要调用的可能会出错的内容，写到方法里
function getSome() {
	let result = ''
	// ...一些代码
	result = '返回值'
	return result
}

// 使用to方法包装执行，得到报错信息、正常执行结果、报错对象
let [errMsg, data] = tryTo(getSome)
if (errMsg) {
	console.error(`报错信息：${errMsg}`)
	return
}

使用tryToAsync

// 将要调用的可能会出错的内容，写到方法里，得到一个异步方法
async function getSomeSync() {
	let result = ''
	// ...一些代码，注意这里可能会用到await
	result = '返回值'
	return result
}
// 使用to方法包装执行，得到报错信息、正常执行结果、报错对象
let [errMsg, data] = await tryToAsync(getSomeSync)
if (errMsg) {
	console.error(`报错信息：${errMsg}`)
	return
}

使用tryToAsyncReq

// getUserList 是调用接口，直接调用并传给 tryToAsyncReq
let [errMsg, data] = await tryToAsyncReq(getUserList({page: 1, size: 10}))
if (errMsg) {
	console.error(`错误信息：${errMsg}`)
	return
}