В этом руководстве вы узнаете, как сообщить вызывающей функции об успешном или неудачном выполнении HTTP-запроса в Vue.js.

Давайте создадим действие Vuex, которое обновляет профиль пользователя.

actions: {
  UPDATE_PROFILE ({ commit, state }, { user }) {
    return new Promise((resolve, reject) => {
      axios.put(process.env.VUE_APP_BASE_URL + 'api/me', user, config).then(response => {
        // request succeeded
        resolve(response) // return response data to calling function
      }).catch(error => {
        // request failed 
        reject(error) // return error to calling function
      })
    })
  }
}

Как видите, действие UPDATE_PROFILE возвращает Promise. В Vuex действия асинхронны, поэтому единственный способ узнать, был ли HTTP-запрос успешным или нет, — это resolve или reject файл promise.

Чтобы сообщить вызывающей функции, что HTTP-вызов прошел успешно, и увидеть данные ответа, мы добавляем следующий код:

resolve(response)

Если вызов не удался, мы можем вернуть сообщение об ошибке и сообщить вызывающей функции, что она не удалась:

reject(error)

Если вы найдете этот пост полезным, пожалуйста, дайте мне знать в комментариях ниже.
Ура,
Ренат Галямов

Хотите поделиться этим с друзьями?
👉 renatello.com/return-promise-from-vuex-action

PS: Обязательно ознакомьтесь с другими учебниками по Vue.js, например. Как установить значение по умолчанию для тега HTML ‹select› в Vue.js или 5 лучших фреймворков CSS для вашего проекта Vue.js (2019).

Первоначально опубликовано на https://renatello.com (Как вернуть обещание из действия Vuex в Vue.js) 8 июля 2019 г.