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 区别是什么?都会执行吗?

...

相关推荐
小白变怪兽20 分钟前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头23 分钟前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全1 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing1 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆1 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding2 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机3 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人3 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景3 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui