await-to-js 基本使用 & 源码分析

接上文

连续串行请求的方案对比,优雅的 await-to-js

故事背景

常规情况下,业务一般拆分到较小的组件,一般涉及 1-2 个请求,使用单个函数等调用及处理错误会比较清晰,但当连续多个请求依次串行调用,业务逻辑可能就是下面这种结构了。

不仅包含多个维度,每个维度的各个需求连续调用,等等层层叠加之后,代码如果用回调甚至 Promise 链式调用的方式逐渐产生结构不清晰或者代码冗余的问题,所以 async & await 应运而生,这里的 await-to-js 就是其中一个优化选择。

优雅的 demo

为什么选择 await-to-js ? 看下面的 demo 就知道它有多优雅了。

js 复制代码
import { to } from "await-to-js";

// 底层原子函数
async function generate() {
  return axios.get(generateUrl);
}

async function match(payload) {
  return axios.post(matchUrl, payload);
}

async function save(payload) {
  return axios.post(saveUrl, payload);
}


// 流程处理中心(数据)
async function flow() {
  const [err1, r1] = await to(generate());
  if (err1) return [err1]; // return axiosError(err1)

  const [err2, r2] = await to(match(r1.data.data));
  if (err2) return [err2];

  const [err3, r3] = await to(save(r2.data.data));
  if (err3) return [err3];

  return [null, r3];
}

// 用户触发函数,(状态管理),loading 之类
async function onClick() {
  const [err, result] = await flow();
  if (err) axiosError(err);
  else setResult(result);
}

源码分析

源码包含注释总共 22 行,一个高阶包裹函数 to

  • 传入一个 Promise(axios)
  • 返回一个 Promise;
  • 成功 await 得到结果 [null,data]; 第一个返回 null 可以理解为,第一个位置赋值为 null,而不是没有
  • 失败 await 得到结果 [err,undefined]; 第二个返回 undefined 可以理解为,没有第二个数据,没经历赋值,所以还是 undefined 类型
typescript 复制代码
/**
 * @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 函数一般结合 await 使用,比如上面的流程处理函数,await 可以接收到 promise 的回调函数的返回结果,无论是 then 还是 catch

js 复制代码
// 流程处理中心(数据)
async function flow() {
  const [err1, r1] = await to(generate());
  if (err1) return [err1]; // return axiosError(err1)

  const [err2, r2] = await to(match(r1.data.data));
  if (err2) return [err2];

  const [err3, r3] = await to(save(r2.data.data));
  if (err3) return [err3];

  return [null, r3];
}

提出疑问,下回分析

从上面的源码我们应该可以提出几个疑问:

比如,为什么 await 可以接收 catch 和 then 的第一个函数返回结果,而没有抛异常呢?

比如,promise 的 catch 可以连续多个调用吗?

比如,promise 的 catch 和 finally 区别是什么?都会执行吗?

...

相关推荐
开开心心就好42 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享43 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js