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链接在一起。 / p>

您的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都会返回一个承诺。承诺可以通过您从then回调中返回的值来解决，或者如果您根据该承诺的解决/拒绝而退回承诺，则会解决/拒绝承诺。

关于JavaScript中流动函数的最佳实践

1 个答案: