回调执行得太早

Question

我正在努力解决一个我无法解决的问题。

我使用NodeJS从Rest API请求数据。对于这个程序，我首先检索一个数据数组，然后根据第一个数组中的id从另一个端点请求一些详细信息。

我在第一个带回调的函数调用中使用了foreach循环，然后在foreach循环中使用了另一个函数调用来获取详细信息。

我的经验是，第二个函数在检索响应之前执行回调。

我已经设法用下面的示例代码重现了这个问题：

console.log('Program start')

// Executing program
getFirstname(function(person) {

    person.forEach(firstname => {

        getSurname(firstname.id, function(lastname) {
            console.log(`${firstname.value} ${lastname}`)
        });

    });
})

// Emulating REST API´s
function getFirstname(callback) {

    console.log('Returning list of firstnames')

    let data = [
        {id: 0, value: 'John'},
        {id: 2, value: 'Andy'},
        {id: 3, value: 'Jimmy'},
        {id: 4, value: 'Alex'},
        {id: 0, value: 'John'},
        {id: 2, value: 'Andy'},
        {id: 3, value: 'Jimmy'},
        {id: 4, value: 'Alex'},
        {id: 0, value: 'John'},
        {id: 2, value: 'Andy'},
        {id: 3, value: 'Jimmy'},
        {id: 4, value: 'Alex'},
        {id: 0, value: 'John'},
        {id: 2, value: 'Andy'},
        {id: 3, value: 'Jimmy'},
        {id: 4, value: 'Alex'},
        {id: 0, value: 'John'},
        {id: 2, value: 'Andy'},
        {id: 3, value: 'Jimmy'},
        {id: 4, value: 'Alex'},
        {id: 0, value: 'John'},
        {id: 2, value: 'Andy'},
        {id: 3, value: 'Jimmy'},
        {id: 4, value: 'Alex'},
        {id: 0, value: 'John'},
        {id: 2, value: 'Andy'},
        {id: 3, value: 'Jimmy'},
        {id: 4, value: 'Alex'},
        {id: 0, value: 'John'},
        {id: 2, value: 'Andy'},
        {id: 3, value: 'Jimmy'},
        {id: 4, value: 'Alex'},
        {id: 0, value: 'John'},
        {id: 2, value: 'Andy'},
        {id: 3, value: 'Jimmy'},
        {id: 4, value: 'Alex'},
        {id: 0, value: 'John'},
        {id: 2, value: 'Andy'},
        {id: 3, value: 'Jimmy'},
        {id: 4, value: 'Alex'},
    ]

    callback(data);
}

function getSurname(id, callback) {

    console.log(`Querying for lastname id ${id}`)

    let data = [
        'Andersen',
        'Johsen',
        'Falon',
        'Alexander',
    ]

    setTimeout(() => {
        callback(data[id]);
    }, 2000);
}

以下是程序的结果：

Program start
Returning list of firstnames
Querying for lastname id 0
Querying for lastname id 2
Querying for lastname id 3
Querying for lastname id 4
Querying for lastname id 0
Querying for lastname id 2
Querying for lastname id 3
Querying for lastname id 4
Querying for lastname id 0
Querying for lastname id 2
Querying for lastname id 3
Querying for lastname id 4
Querying for lastname id 0
Querying for lastname id 2
Querying for lastname id 3
Querying for lastname id 4
Querying for lastname id 0
Querying for lastname id 2
Querying for lastname id 3
Querying for lastname id 4
Querying for lastname id 0
Querying for lastname id 2
Querying for lastname id 3
Querying for lastname id 4
Querying for lastname id 0
Querying for lastname id 2
Querying for lastname id 3
Querying for lastname id 4
Querying for lastname id 0
Querying for lastname id 2
Querying for lastname id 3
Querying for lastname id 4
Querying for lastname id 0
Querying for lastname id 2
Querying for lastname id 3
Querying for lastname id 4
Querying for lastname id 0
Querying for lastname id 2
Querying for lastname id 3
Querying for lastname id 4
John Andersen
Andy Falon
Jimmy Alexander
Alex undefined
John Andersen
Andy Falon
Jimmy Alexander
Alex undefined
John Andersen
Andy Falon
Jimmy Alexander
Alex undefined
John Andersen
Andy Falon
Jimmy Alexander
Alex undefined
John Andersen
Andy Falon
Jimmy Alexander
Alex undefined
John Andersen
Andy Falon
Jimmy Alexander
Alex undefined
John Andersen
Andy Falon
Jimmy Alexander
Alex undefined
John Andersen
Andy Falon
Jimmy Alexander
Alex undefined
John Andersen
Andy Falon
Jimmy Alexander
Alex undefined
John Andersen
Andy Falon
Jimmy Alexander
Alex undefined

如您所见，有几条记录的值为undefined。另外，我添加了一个setTimeout来模拟每次rest调用需要几秒钟的时间。发生的情况是，所有的查询都被立即触发，然后2秒后所有的响应都会同时返回。

我期望它等待每一秒的rest调用，然后返回结果。

我该如何解决这个问题？

致以最好的问候，克里斯蒂安

Answer 1

使用undefined的原因是因为您的data数组的长度为4 (索引从0到3)，而id的范围从0到4。这意味着当您引用data[4]时，您会得到<id>D9>。

Answer 2

你的回调没有任何问题。然而，数据是不正确的。如下所示：

function getSurname(id, callback) {

    console.log(`Querying for lastname id ${id}`)

    let data = [
        'Andersen',
        'Johsen',
        'Falon',
        'Alexander',
    ]

    setTimeout(() => {
        callback(data[id]);
    }, 2000);
}

每次调用Alex时，都会传递id 4，以便在data数组中使用。请记住，数组是基于0的，所以data[4] = undefined...