В этом руководстве вы узнаете, как сообщить вызывающей функции об успешном или неудачном выполнении 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 г.