鸿蒙面试必问：如何优雅的处理 Promise await异常？

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接受参数Promise和errorExt，如果这个 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 结束

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料