Question

我正在开发一个需要获取一些数据并处理它的javascript项目，但我遇到了JavaScript异步性质的问题。我希望能够做的是以下内容。

//The set of functions that I want to call in order
function getData() {
    //gets the data
}

function parseData() {
    //does some stuff with the data
}

function validate() {
    //validates the data
}

//The function that orchestrates these calls 
function runner() {
    getData();
    parseData();
    validate();
}

这里我希望每个函数在继续下一次调用之前等待完成，因为我遇到程序在检索之前尝试验证数据的情况。但是，我还希望能够从这些函数返回一个值进行测试，所以我不能让这些函数返回一个布尔值来检查完成。在继续下一次调用之前，如何让javascript等待函数运行完成？

Answer 1

使用承诺：

//The set of functions that I want to call in order
function getData(initialData) {
  //gets the data
  return new Promise(function (resolve, reject) {
    resolve('Hello World!')
  })
}

function parseData(dataFromGetDataFunction) {
  //does some stuff with the data
  return new Promise(function (resolve, reject) {
    resolve('Hello World!')
  })
}

function validate(dataFromParseDataFunction) {
  //validates the data
  return new Promise(function (resolve, reject) {
    resolve('Hello World!')
  })
}

//The function that orchestrates these calls 
function runner(initialData) {
    return getData(initialData)
        .then(parseData)
        .then(validate)
}

runner('Hello World!').then(function (dataFromValidateFunction) {
    console.log(dataFromValidateFunction);
})

它们不仅容易掌握，而且从代码可读性的角度来看也很有意义。详细了解他们here。如果您在浏览器环境中，我建议this polyfill。

Answer 2

您引用的代码将同步运行。 JavaScript函数调用是同步的。

所以我假设getData，parseData和/或validate涉及异步操作（例如在浏览器中使用ajax，或NodeJS中的readFile。如果是这样，您基本上有两个选项，两个选项都涉及回调。

第一个是让这些函数接受它们在完成时调用的回调，例如：

function getData(callback) {
    someAsyncOperation(function() {
        // Async is done now, call the callback with the data
        callback(/*...some data...*/);
    });
}

你会这样使用：

getData(function(data) {
    // Got the data, do the next thing
});

回调的问题在于它们很难撰写并且具有相当脆弱的语义。因此发明 promises 是为了给他们更好的语义。在ES2015（又名“ES6”）或一个体面的promises库中，看起来像这样：

function getData(callback) {
    return someAsyncOperation();
}

或如果someAsyncOperation未启用承诺，则：

function getData(callback) {
    return new Promise(function(resolve, reject) {
        someAsyncOperation(function() {
            // Async is done now, call the callback with the data
            resolve(/*...some data...*/);
            // Or if it failed, call `reject` instead
        });
    });
}

似乎没有为你做太多，但其中一个关键的事情是可组合性;你的最终功能最终看起来像这样：

function runner() {
    return getData()
        .then(parseData) // Yes, there really aren't () on parseData...
        .then(validate); // ...or validate
}

用法：

runner()
    .then(function(result) {
         // It worked, use the result
    })
    .catch(function(error) {
         // It failed
    });

这是一个例子;它只适用于支持Promise和ES2015箭头函数的最新浏览器，因为我很懒，用箭头函数编写它并且没有包含Promise库：

"use strict";

function getData() {
    // Return a promise
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // Let's fail a third of the time
            if (Math.random() < 0.33) {
                reject("getData failed");
            } else {
                resolve('{"msg":"This is the message"}');
            }
        }, Math.random() * 100);
    });
}

function parseData(data) {
    // Note that this function is synchronous
    return JSON.parse(data);
}

function validate(data) {
    // Let's assume validation is synchronous too
    // Let's also assume it fails half the time
    if (!data || !data.msg || Math.random() < 0.5) {
        throw new Error("validation failed");
    }
    // It's fine
    return data;
}

function runner() {
    return getData()
        .then(parseData)
        .then(validate);
}

document.getElementById("the-button").addEventListener(
    "click",
    function() {
        runner()
            .then(data => {
                console.log("All good! msg: " + data.msg);
            })
            .catch(error => {
                console.error("Failed: ", error && error.message || error);
            });
    },
  false
);

<input type="button" id="the-button" value="Click to test">
(you can test more than once)

Answer 3

您应该更改每个函数以返回Promise，这将允许您的最终函数变为：

function runner() {
    return Promise.try(getData).then(parseData).then(validate);
}

要做到这一点，每个函数的主体应该包含在一个新的承诺中，例如：

function getData() {
  return new Promise(function (res, rej) {
    var req = new AjaxRequest(...); // make the request
    req.onSuccess = function (data) {
      res(data);
    };
  });
}

这是承诺如何运作的一个非常粗略的例子。如需更多阅读，请查看：

2ality的精彩博文：part 1和part 2
bluebird关于why promises
mdn＆＃39}关于JS' Promise class

如何在javascript中同步调用一组函数

3 个答案: