Async await правильно использование?

Question

[uniquerichboy]

Подскажите пожалуйста, правильно ли я использую async await, уже запутался как с ними правильно работать, так как например нельзя сразу поставить async на все и везде проставить await, тогда она будет писать ошибка, так как внутри есть ещё функции, а выглядит как-то костыльно и хотел вот узнать, правильно ли я делаю?

try {
				socket.on("exit", async function (team) {
					await axios.post(process.env.REACT_APP_API_URL + 'api/games/remove', {
						game: MATCH_ID, team,
					}).then(async function (response) {
						await dispatch({ 
							type: UPDATE_GAME, 
							game: response.data.game, 
							team_a: response.data.team_a,
							team_b: response.data.team_b,
						});
						await dispatch({ 
							type: ACCEPT, 
							accepts: false, 
						});
					});
				});
			} catch (e) {
				console.error(e);
			}

Comments

[MagnusDidNotBetray]

Зачем здесь then?

const response = await axios.post(process.env.REACT_APP_API_URL + 'api/games/remove', {
    game: MATCH_ID, team,
});
await dispatch({ 
    type: UPDATE_GAME, 
    game: response.data.game, 
    team_a: response.data.team_a,
    team_b: response.data.team_b,
});

В общем, смотрите Тимура https://www.youtube.com/watch?v=Jdf_tZuJbHI

[uniquerichboy]

MagnusDidNotBetray, then это плохо? или лишний код просто?

[Василий Банников]

uniquerichboy, просто читать сложно, когда два подхода смешиваются

[MagnusDidNotBetray]

uniquerichboy, можно писать на всё на then, можно на async/await (так пишет большинство, так как код становится похожим на синхронный, а не весь в коллбеках зена), но then и async/await вместе - это хрень в большинстве случаев. Исключение разве что await fetch().then(response => response.json()), так красивее.

[lasthead]

MagnusDidNotBetray, уже не первый раз встречаю с fetch такую конструкцию. зачем ему и await и then?

[MagnusDidNotBetray]

lasthead, чтобы написать такое в одну строку и без дополнительной переменной

const response = await fetch()
const obj = await response.json()

[lasthead]

MagnusDidNotBetray, ну т.е. никакой чёрной магии, просто такая вот конструкция?

Answer 1

[profesor08]

Именно тут await ждет когда отработает колбек, а не запрос. Если dispatch не промис, то await перед ним тоже не нужен. Так-же блок try/catch никак не отреагирует на исключения в промисе или колбеке. Грубо говоря код делает вовсе не то, что тебе от него хочется.

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

socket.on("exit", async () => {
  try {
    const response = await axios.post(
      process.env.REACT_APP_API_URL + "api/games/remove",
      {
        game: MATCH_ID,
        team,
      },
    );

    await dispatch({
      type: UPDATE_GAME,
      game: response.data.game,
      team_a: response.data.team_a,
      team_b: response.data.team_b,
    });

    await dispatch({
      type: ACCEPT,
      accepts: false,
    });
  } catch (err) {
    console.error(err);
  }
});