Почему две асинхронных функции внутри redux-thunk выполняются не так как я хочу?

Question

[BogdanZots]

Всем привет все мы знаем , что

const one = async () => { console.log(1) } 
const two = async () => { console.log(2) } 
one()
two() // Выведет 1 потом 2

У меня есть два функции ( redux thunk ) , обе ассинхронны ( ниже прилаживаю код )

export const loginUser = (data) => {  // эта функция отрпавляет запрос на сервер и сетает токен  в лс
  return async function (dispatch) {
    const token = await postLogin(data);
    localStorage.setItem('token', JSON.stringify(token));
    if (token) {
      const decodedToken = jwt_decode(token);
      dispatch(loginUserAC(decodedToken));
    }
  };
};

export const checkAuth = () => { // эта функция берёт токен из лс , и проверяет авт. ли юзер 
  let decodedToken = "";
  return async function (dispatch) {
    const token = JSON.parse(localStorage.getItem('token'));
    if (token) {
      decodedToken = jwt_decode(token);
    }
    dispatch(checkUserAuthAC(decodedToken));
  };
};

я вызываю обе функции по клику

<button
        onClick={() => {
          setEmail("");
          setPassword("");
          dispatch(loginUser(data)); // должна отработать первее
          dispatch(checkAuth()); // должна отработать позже
        }}
        type="button"
      >
        Войти
      </button>

Но почему то dispatch(loginUser(data)); выполняется быстрее ? Кто нибудь может подсказать что я делаю не так ? и как исправить данную ситуацию?

Comments

[Lynn «Кофеман»]

> Выведет 1 потом 2
Не знаем. Вообще-то это не определено и при стечении обстоятельств может быть сначала 2 потом 1

[Alexandroppolus]

Lynn «Кофеман», в первом "обезжиренном" примере именно что знаем. А с логином - там видимо первый запрос возвращается быстрее. Там надо просто в один тхуньк это всё запихнуть.

[Lynn «Кофеман»]

Alexandroppolus, потому что так имплементировали. В стандарте разве есть требование к порядку резолвинга?

[Lynn «Кофеман»]

В общем моё мнение — проще считать порядок выполнения асинхронных функций неопределённым если ты не приложил никаких усилий для его определения.

[Alexandroppolus]

Lynn «Кофеман», конечно. Там и резолвинга никакого нет. one(); two(); - это просто два полностью синхронных действия. Если авайтить эти функции в других функциях, запущенных параллельно, то будут микротаски к исходно зарезолвленным промисам, они тоже в порядке очереди.
Даже сетТаймауты с одинаковым мс выполняют колбэки по порядку. Порядок есть, в общем.

[Alexandroppolus]

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

const awaitOne = async () => { await one(); } 
const awaitTwo = async () => { await two(); } 
awaitOne()
awaitTwo() // Выведет 1 потом 2

вот тут микротаски, но тоже в порядке очереди

Answer 1

[Андрей]

Всем привет все мы знаем , что

Вообще не факт.

const one = async () => { console.log(1) } 
const two = async () => { console.log(2) } 
await one()
await two() // Выведет 1 потом 2

Вот так - факт.

Метод checkAuth синхронный, смысла делать его async нет.

Вот, что происходит в вашем случае:

dispatch(loginUser(data)); // должна отработать первее

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

dispatch(checkAuth()); // должна отработать позже

Не должна по причине, указанной выше.

Достаточно простого фикса:

onClick={async () => {
          setEmail("");
          setPassword("");
          await dispatch(loginUser(data)); //  теперь мы точно дожидаемся выполнения
          dispatch(checkAuth()); // эту функцию следует просто сделать синхронной, добавлять здесь await не стоит. 
        }}

Comments

[BogdanZots]

Спасибо , понял!