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

接上文

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

故事背景

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

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

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

优雅的 demo

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

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 类型

/**
 * @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

// 流程处理中心(数据)
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 区别是什么?都会执行吗?

原文链接:https://juejin.cn/post/7337135278634614834 作者:egolink

(0)
上一篇 2024年2月20日 上午10:46
下一篇 2024年2月20日 上午10:57

相关推荐

发表回复

登录后才能评论