Если вы раньше использовали Vue.js, возможно, вы хорошо знакомы с axios — замечательной библиотекой для отправки Ajax. Этот пост будет использовать Promise для реализации простой части.

Использование Vanilla JS для отправки Ajax

В основном есть 4 шага для отправки Ajax с JS:

  1. Создайте XMLHttpRequest объект.
  2. Вызвать функцию open с методом и параметром URL.
  3. Установить обратный вызов onreadystatechange.
  4. Вызовите send для отправки запроса с заданными данными.

Вроде идеально, но есть проблема при использовании Promise. Я расскажу об этом позже.

Обещать

Функция конструктора Promise принимает функцию, которая будет выполняться при создании объекта Promise. Эта функция имеет параметры resolve и reject. Кроме того, Promise будет следовать этим двум правилам.

  1. Когда он меняет состояние на fulfilled, он вызывает функцию resolve.
  2. Когда он меняет состояние на rejected, он вызывает функцию reject.

Тогда мы можем придумать такие коды:

Примечание: функции resolve и reject не будут вызываться до тех пор, пока не будет изменено состояние Promise.

Проблема

Как я уже сказал, при использовании Promise возникнут проблемы. При отправке HTTP-запроса он несколько раз вызывает обратный вызов onreadystatechange.

Когда readyState === 2, коды перейдут к строке 8 и вызовут функцию reject. После вызова reject этот Promise изменит свое состояние на rejected, и дело сделано. Он больше не изменит своего состояния! Результат будет таким:

Правильный способ такой:

Заверните

После решения этой проблемы нам лучше обернуть эти коды в функцию.

Другие разработчики могут использовать нашу библиотеку с then() .