1. 背景

如果await后面的异步操作出错,则会抛出异常,不继续执行后面的逻辑

例如:

async  function test() {
  console.log("test 开始")
  let result=await  new Promise<string>((resolve, reject) => {
    setTimeout(() => {
      reject("hello world");
    }, 1000);
  });
  console.log("test 结束")
}
test();
//只会输出 test 开始,不会输出 test 结束

防止出错的方法,也是将其放在try...catch代码块之中。

async  function test() {
    console.log("test 开始")
    try {
      let result=await  new Promise<string>((resolve, reject) => {
        setTimeout(() => {
          reject("hello world");
        }, 1000);
      });
      console.log(result)
    } catch (e) {
      console.error("异常:"+e)
    }
    console.log("test 结束")
}
//输出
test 开始
异常:hello world
test 结束

2. 优雅的异常处理

从上面的例子我们发现,如果每个请求的地方都添加 try-catch,就会显得代码很臃肿,解决这样的臃肿代码,我们可以用await-to-js函数

await-to-js 是 前端 中的一个三方库,它的源码很简单,就 23 行代码,我们一起来看看。

 /**
 * @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接受参数PromiseerrorExt,如果这个 Promise 成功时返回[null, data],如果异常时会判断是否带有errorExt参数(代表传递给 err 对象的附加信息),如果有时会与 catch 捕获的 err 合并返回,如果没有时返回[err, undefined]

3. 在非ArkTS中的用法

  • 通过to函数改造后,如果返回第一个参数不为空时,说明该请求报错,就可以提前 return 出去,如果不存在第一个参数时,则异步请求成功。
import to from 'await-to-js'

function getList(){
  return  new Promise<string>((resolve, reject) => {
   //我是一个网络请求,可能成功,可能失败
  })
}

// 获取列表list 如果err有值,则是异常,否则是成功, 可以继续下方的逻辑
const [err, data] = await to(getList(params))
if (err) return

4. 在ArkTS中的用法

上述代码,如果用在ArkTS中,我们会发现无法使用,const [err, data] 这种写法目前在ArkTS不支持解构变量声明,为了解决,我们可以使用一个包装类 PromiseResult 来实现

//Global.ts

/**
 * @param { Promise } promise
 * @param { Object= } errorExt - Additional Information you can pass to the err object
 * @return { Promise }
 */
export function safePromise<T, U = Error>(
  promise: Promise<T>,
  errorExt?: object
): Promise<PromiseResult<T, U>> {
  return promise
    .then<PromiseResult<T, U>>((data: T) => new PromiseResult(data, null))
    .catch<PromiseResult<T, U>>((err: U) => {
      if (errorExt) {
        const parsedError = Object.assign({}, err, errorExt);
        return  new PromiseResult(undefined, parsedError)
      }
      return  new PromiseResult(undefined, err)
    });
}

class PromiseResult<T, U = Error> {
  result: T
  error: U

  constructor(result: T, error: U) {
    this.result = result
    this.error = error
  }
}

export default safePromise;

使用例子


import safePromise from 'Global.ts';

async  function test() {
  console.log("test 开始")
  const data = await safePromise(new Promise<string>((resolve, reject) => {
    setTimeout(() => {
      reject("hello world");
    }, 1000);
  }));
  if (data.error) {
    console.error("异常了")
  }else{
    console.log("没有异常")
  }
  console.log("test 结束")
}
test();
//输出
test 开始
异常了:hello world
test 结束
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐