jQueryだと$.ajaxでしたよね

$.ajax({
  url: apiUrl,
  method: 'POST',
  dataType: 'json'
}).done(data => {
  // 成功時の処理
}).fail((xhr, stat, err) => {
  // 失敗時の処理
}).always(() => {
  // 成功・失敗に関わらず常に実行される処理
})

これはこれで同期処理なので並行で別の処理を走らせながらの場合は恩恵があったかと思います。 でも大人になっていけば行くほどVanila的にしたくなるのが人の心(かどうかは人次第)

ググってよく出てきたJSって今までは以下だった

const url = 'https://endpoint.com/api'

const xhr = new XMLHttpRequest()
xhr.open('POST', url, true)
xhr.responseType = 'json'

xhr.onload = () => {
  if (xhr.status === 200) {
    const responseData = xhr.response
  } else {
    console.error('通信エラー:', xhr.statusText)
  }
}
xhr.onerror = () => {
  // ネットワークエラー
}
xhr.onprogress = (event) => {
    // 進捗状態確認
}
xhr.ontimeout = () => {
    // タイムアウト
}
xhr.send()

こちらも同期処理なので非同期処理にしてレスポンス待ちをして次の処理にする場合はPromiseを使ってresolveとrejectを設定し処理する必要があったので手間に感じました(かどうかは人の心次第)

fetchを使って通信したらソースコードが少なくなったわ

const apiUrl = 'https://endpoint.com/api'

fetch(apiUrl)
  .then(response => {
    if (!response.ok) {
      // レスポンスエラー
    }
    // JSONデータ
    return response.json()
  }).then(data => {
    // APIからのデータを利用する
  }).catch(error => {
    // エラーハンドリング
  })

thenでdataを受け取ると(2つ目のthen)その他の処理は走らないので、レスポンスを受け取ってレスポンスに応じた処理を行うのにとても便利だった話でした、おしまい。