NodeJS async / await не ожидает ответа на предыдущий запрос

Question

function getData(input) {
    return new Promise((resolve, reject) => {
        $.post({
            url: baseurl,
            data: input
        }).done(function (result) {
            resolve({ code: 200, data: result });
        }).fail(function (result) {
            resolve({ code: 400, data: result });
        });
    });
}

При нажатии клавиши я вызвал следующую функцию с входным параметром поиска, но проблема в том, что второй запрос / ответ получен до того, как поступит первый запрос / ответ.

$("#searchText").on("keyup", async function () {
       let search = $.trim($(this).val());
       let result = await getData({ search: search });
});

Answer 1

Вам нужно отменить или игнорировать запросы, если вы больше не хотите ответа.Ответы могут поступать в любом порядке, и через любое количество времени, если вы не установите тайм-аут.

Лучшее решение - отменить запросы, если результаты больше не нужны.У вас есть несколько вариантов:

1. Отмена предыдущего запроса при создании нового запроса (xhr.abort)
2. Отмена более старых запросов, которые не были завершены при получении нового ответа

Пример:

$("#searchText").on("keyup", async function () {
     if (xhr) xhr.abort();
     let search = $.trim($(this).val());
     let result = await getData({ search: search });
});

Answer 2

Вот способ исправить это:

let latestSearch = "";

function getData(input) {
    return new Promise((resolve, reject) => {
        $.post({
            url: baseurl,
            data: input
        }).done(function (result) {
            resolve({ code: 200, data: result, search: input.search });
        }).fail(function (result) {
            resolve({ code: 400, data: result, search: input.search });
        });
    });
}

$("#searchText").on("keyup", function() {
       let search = $.trim($(this).val());
       latestSearch = search;
       let result = await getData({ search: search });
       if (result.search === latestSearch) {
        // do something with the data...
       }

});

Answer 3

Для каждого ключа вы отправляете http-запрос асинхронно.В этом случае вы можете установить глобальную переменную для вашего ajax-запроса и, если новый запрос запущен, вы можете прервать предыдущий запрос.

Например,

var test = null;

for (var i = 0; i < 10; i++) {
    if(test){ test.abort(); test = null }
    test = $.post(); // your post request
}

В приведенном вышеНапример, я вызвал 10 запросов Ajax асинхронно, но будет опубликован только последний запрос. Другой запрос будет прерван.

Answer 4

Как упомянуто в комментарии mtkopone, вы должны использовать логику debounce для этого.Несмотря на то, что await / async гарантирует FCFS (First Come First Served), он находится только внутри одной и той же асинхронной функции.

Здесь в каждом событии keyup создается новый экземпляр анонимной асинхронной функции, и каждый await остается независимо,

Вы всегда должны помнить, что await / async не делает никакой магии

 await x = y()

равно

 y.then(x => {})