javascript - 函数内函数在 Javascript 中重复了 3 倍

Question

我对 Javascript 有点陌生，并且编写了一些 Chrome 扩展程序。该代码包含一个序列过程，其中一个函数被传递给另一个函数，并在第一个函数完成时被调用。坦率地说，这对我来说变得越来越复杂了。

我将用一个示例来说明我的代码中的顺序:

function successFunc() {
    console.log("Success!");
}

function handleErrorFunc(successFunc) {
    ... stuff to handle error...
    step1(successFunc);
}

function step1(successFunc) {
    var url = ...
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.send();
    request.onerror = function() {
        ...
    }
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
            ...
            step2(successFunc)
        }
    }
}


function step2(successFunc) {
    var url = ...
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.send();
    request.onerror = function() {
        ...
    }
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
            ...
            successFunc()
        }
    }
}

现在我打电话

step1(successFunc);

是否有什么方法可以防止这种情况发生，也许是某种设计模式？

Answer 1

许多 javascript 库返回 Promise来自ajax调用。这是比使用回调更可取的方法，因为它可以大大简化您的代码。

您的代码将如下所示，而不是您当前拥有的代码。

step1().then(step1Result => step2(step1Result))
      .catch(err => console.error("step1 faled",err));

您可以根据需要继续链接

step1().then(step1Result => step2(step1Result)
                             .then(step2Result => step3(step2Result))
                             .catch(err => console.error("step2 failed",err))
      )
      .catch(err => console.error("step1 faled",err));

使用标准的 XMLHttpRequest 不遵循这种模式，但如果这就是你想要做的，它可以直接包装在一个 Promise 中 - 但是使用支持的现有 ajax 库要容易得多 promise 。

我建议您先阅读 Using Promises guide .

---

编辑:如果您想将调用包装在 Promise 中，请确保您传回响应和错误。例如:

function ajaxGet(url){
     return new Promise((resolve, reject) => {
        var request = new XMLHttpRequest();
        request.open("GET", url, true);
        request.send();
        request.onerror = reject; // will pass back error
        request.onreadystatechange = function() {
            if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
                resolve(request.responseText);
            }
        }
    });
}

那么step1可能是

function step1(){
    return ajaxGet("url/for/step1");
}