javascript - JavaScript 中流动函数的最佳实践

Question

我从请求中接收数据，在显示它之前我想处理它，比如添加/格式化/生成/排序刚收到的原始内容。

这是我接收数据的方式，以及我如何将它发送到 processData 函数

this.httpService.get(`this/is/my/url`, body).then((data) => {
    this.processData(data).then((result) => {
        this.data = result;
    }, (error) => {
        this.error = error;
    });
}, (error) => {
    this.error = error;
});

注意 processData 函数可能需要调用 promises 函数。
我看到了两种编写 processData 函数的方法:

第一种方式

function processData(data) {
    return new Promise((resolve, reject) => {
        step1();

        function step1() {
            this.myService.yolo(data).then({
                //...
                step2();
            }, (error) => {
                reject(error);
            });
        }

        function step2() {
            this.myService.foo(data).then({
                //...
                step3();
            }, (error) => {
                reject(error);
            });
        }

        function step3() {
            this.myService.bar(data).then({
                //...
                step4();
            }, (error) => {
                reject(error);
            });
        }

        function step4() {
            //...
            resolve(data);
        }
   });
}

第二种方式

function processData(data) {
    step1().then((result) => {
        step2().then((result) => {
            step3().then((result) => {
                step4();
                return data;
            }, (error) => {
                reject(error);
            });
        }, (error) => {
            reject(error);
        });
    }, (error) => {
        reject(error);
    });

    function step1() {
        //...
    }

    function step2() {
        //...
    }

    function step3() {
        //...
    }

    function step4() {
        //...
    }
}

第二种方式让我觉得更合乎逻辑，因为你不需要查看step函数内容来理解发生了什么，但我觉得符号太困惑了!
10 个步骤，这是不可读的。

所以我想知道这样做的好方法是什么!

Answer 1

使用 promises 的关键是你没有从 then 回调中返回任何东西，这就是你将 promises 链接在一起的方式方式。

您的processData 可以如下所示:

function processData(data) {
    step1().then(step2).then(step3).then(step4);

    function step1() {
        //...
    }

    // ...
}

...步骤如下所示:

function step1() {
    return this.myService.yolo(data).then(result => {
        return transformedResult;
    });
}

...这意味着，当然，除非它们很复杂，否则您不需要将它们分解成各自的功能:

function processData(data) {
    return this.myService.yolo(data)
        .then(result => {
            return /*...`result` transformed in some way...*/;
        })
        .then(result => anotherAsyncCall(result))
        .then(result => {
            return /*...`result` transformed again... */;
        })
        .then(result => anotherAsyncCall(result)) // If no transformation needed when passing it on
        .then(/*etc.*/);
}

这是因为每次调用 then 都会返回一个 promise。 promise 要么使用您从 then 回调中返回的值解决，要么如果您返回一个 promise ，它会根据该 promise 的解决/拒绝被解决/拒绝。