【若川视野 x 源码共读】第21期 | await-to-js 如何优雅的捕获 await 的错误前言本文参加了由公众

前言

本文参加了由公众号@若川视野发起的每周源码共读活动，点击了解详情一起参与。

1早期

asyncA(function (res1) {
        asyncB(res1.data, function (res2) {
          asyncC(res2.data, function () {});
        });
      });

promise出现后

asyncA.then((res1) => {
        if (res1.data) {
          asyncB.then((res2) => {
            if (res2.data) {
              asyncC.then(() => {});
            }
          });
        }
      });

asyn await出现后

try {
        const res1 = await asyncA();
        if (res1.data) {
            try {
                const res2 = await asyncB();
            if (res2.data) {
                try {
                    const res3 = await asyncC();
                } catch (error) {
                    
                }
            }
            } catch (error) {
                
            }
        }
       } catch (error) {
        
       }

但是这个时候的对于错误的处理就需要进行多个try catch,而且在页面开发中也是最常见不过，如果不想进行多个try catch ，现在也有解决办法-使用 await-to-js

2 await-to-js

官方文章：How to write async await without try-catch blocks in Javascript
核心代码

export function to(promise, errorExt) {
            return promise
                .then((data) => [null, data])
                .catch((err) => {
                    if (errorExt) {
                        const parsedError = Object.assign({}, err, errorExt);
                        return [parsedError, undefined];
                    }
                    return [err, undefined];
                });
        }

该函数有2个参数，第一个为传入的接口，第二个为错误文本提示，其代码内部为返回一个Promise,如果请求成功，返回一个数组，数组第二项为返回的数据data,如果请求失败，进行判断是否有传入默认错误字符，仍然返回一个数组，数组第一项为err.而在使用中正如官网所示，只需要判断数组第一项和第二项即可