Как вызывать вложенные асинхронные функции?

Question

[zlodiak]

Я пытаюсь внутри асинхронной функции вызвать другие асинхронные функции, но получаю следующее сообщение об ошибке:
Can not use keyword 'await' outside an async function

Вот код:

export const setGenderThunk = (gender, login) => {
    return async dispatch => {
        const users = await getUsers || [];     // там внутри fetch
        users.forEach(user => {
            if(user.login === login) {
                const user_ = { ...user, gender: gender };
                await setUser(user_, user.id);      // там тоже внутри fetch
                debugger
                if(result.ok) {
                    dispatch(setGenderAC(user_.gender));
                }
                
            }
        });
    }
}

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

export const setGenderThunk = (gender, login) => {
    return async dispatch => {
        const users = await getUsers || [];
        users.forEach(user => {
            if(user.login === login) {
                const user_ = { ...user, gender: gender };
                ;(async () => {
                    const result = await setUserF(user_, user.id);
                    debugger
                    if(result.ok) {
                        dispatch(setGenderAC(user_.gender));
                    }
                })();
                
            }
        });
    }
}

async function setUserF(user, id) {
    return await setUser(user, id);
}

Answer 1

[Aetae]

forEach - синхронный. Либо используйте либы умеющие в асинхронный forEach, либо используйте обычные циклы:

export const setGenderThunk = (gender, login) => {
  return async dispatch => {
    const users = await getUsers || [];     // там внутри fetch
    for(let user of users) {
      if(user.login === login) {
        const user_ = { ...user, gender: gender };
        await setUser(user_, user.id);      // там тоже внутри fetch
        debugger
        if(result.ok) {
          dispatch(setGenderAC(user_.gender));
        }

      }
    };
  }
}

P.S. Второй вариант кстати у вас очень плох: forEach отрабатывает всё равно синхрнно, но при этом единовременно плодит множество асинхронных функций выполняющихся параллельно (которых, само собой, никто не ждёт).

Comments

[zlodiak]

Спасибо, так работает. Но всё равно не понятно чем цикл for of лучше цикла forEach. Они же оба синхронные.

[Aetae]

zlodiak,

Они же оба синхронные.

Как видишь - нет.
Обычный цикл внутри асинхронной функции умеет работать асинхронно.
forEach же - это просто метод, который синхронно и последовательно вызывает для каждого элемента массива переданную аргументом функцию. Асинхронна ли переданная функция или нет - не имеет значения, потому что сам forEach - синхронная функция(методы в js === функции).

[WbICHA]

zlodiak, Aetae, а как же мап?

await Promise.all(users.map(async (user) => { ... })

[Aetae]

WbICHA, что map? map точно такой же синхронный. Если внутри этого вашегоasync (user) => { ... } вы сделаете какой-то await - то для всех элементов users он запустится сразу и параллельно, а Promise.all просто потом подождёт всё что запустилось.

[WbICHA]

Aetae,

параллельно

Параллельно? В жс?

Promise.all просто потом подождёт всё что запустилось.

И в чём проблема? Для чего в задачи, что у автора, делать следующий запрос только после завершения предыдущего?

[Aetae]

WbICHA,

Параллельно? В жс?

Ты знаешь как это работает, я знаю как это работает, этого достаточно. Не еби мозги, пожалуйста.

Для чего в задачи, что у автора, делать следующий запрос только после завершения предыдущего?

Раз он использовал forEach, я предположил что ему нужно последовательное исполнение. По сути я заменил его код на идентичный, но работающий.
Введение новых абстракций только засрёт ему голову, но не принесёт понимания.