Замена then на async/await

Код с методом this, который принимает в качестве аргумента колбэк-функции (еще может быть второй аргумент для случаев выполнения и отказа соответственно):

export const getAuthUserData = () => (dispatch) => {
    authAPI.me()
    .then(response => {
        if (response.data.resultCode === 0) {
          let {id, login, email} = response.data.data;
          dispatch(setAuthUserData(id, email, login, true))
        }
    })
}

Вот так будет выглядеть при помощи конструкции async/await:

export const getAuthUserData = () => async (dispatch) => {
    let response = await authAPI.me()

        if (response.data.resultCode === 0) {
          let {id, login, email} = response.data.data;
          dispatch(setAuthUserData(id, email, login, true))
        }
}

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

Еще пример

Вместо response, разумеется, может использоваться другая переменная при преобразовании then в async/await. Это зависит от той переменной, которая была внутри then.

До рефакторинга (с then):

export const unfollow = (userId) => {
   return (dispatch) => {
       dispatch(toogleFollowingProgress(true, userId));
           usersAPI.unfollow(userId)
               .then(data => {
                   if (data.resultCode == 0) {
                       dispatch(unfollowSuccess(userId));
                   }
                   dispatch(toogleFollowingProgress(false, userId));   
               })  
   }
}

После рефакторинга (с async/await):

export const unfollow = (userId) => {
   return async (dispatch) => {
       dispatch(toogleFollowingProgress(true, userId));
          let data = await usersAPI.unfollow(userId)

                   if (data.resultCode == 0) {
                       dispatch(unfollowSuccess(userId));
                   }
                   dispatch(toogleFollowingProgress(false, userId));   
   }
}

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *