Если вы раньше использовали Vue.js, возможно, вы хорошо знакомы с axios
— замечательной библиотекой для отправки Ajax. Этот пост будет использовать Promise
для реализации простой части.
Использование Vanilla JS для отправки Ajax
В основном есть 4 шага для отправки Ajax с JS:
- Создайте
XMLHttpRequest
объект. - Вызвать функцию
open
с методом и параметром URL. - Установить обратный вызов
onreadystatechange
. - Вызовите
send
для отправки запроса с заданными данными.
Вроде идеально, но есть проблема при использовании Promise. Я расскажу об этом позже.
Обещать
Функция конструктора Promise
принимает функцию, которая будет выполняться при создании объекта Promise
. Эта функция имеет параметры resolve
и reject
. Кроме того, Promise
будет следовать этим двум правилам.
- Когда он меняет состояние на
fulfilled
, он вызывает функциюresolve
. - Когда он меняет состояние на
rejected
, он вызывает функциюreject
.
Тогда мы можем придумать такие коды:
Примечание: функции resolve
и reject
не будут вызываться до тех пор, пока не будет изменено состояние Promise
.
Проблема
Как я уже сказал, при использовании Promise
возникнут проблемы. При отправке HTTP-запроса он несколько раз вызывает обратный вызов onreadystatechange
.
Когда readyState === 2
, коды перейдут к строке 8 и вызовут функцию reject
. После вызова reject
этот Promise
изменит свое состояние на rejected
, и дело сделано. Он больше не изменит своего состояния! Результат будет таким:
Правильный способ такой:
Заверните
После решения этой проблемы нам лучше обернуть эти коды в функцию.
Другие разработчики могут использовать нашу библиотеку с then()
.