如何承諾 Ajax 調用

假設您有一個 AJAX 調用，以及其他一些依賴於 AJAX 調用在運行之前加載的函數。

這是AJAX函數。

function doTheThing() {
  $.ajax({
    url: window.location.href,
    type: 'POST',
    data: {
      key: 'value',
    },
    success: function (data) {
      console.log(data)
    },
    error: function (error) {
      console.log(error)
    },
  })
}

而且你可能連續調用這兩個函數，發現第二個函數不起作用，因為它依賴於第一個。

doTheThing()
doSomethingElse()

我們可以使用 Promise 快速輕鬆地重寫它

function doTheThing() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: window.location.href,
      type: 'POST',
      data: {
        key: 'value',
      },
      success: function (data) {
        resolve(data)
      },
      error: function (error) {
        reject(error)
      },
    })
  })
}

現在我們可以進行 AJAX 調用，運行成功函數，並使用任何後續代碼進行跟進。

doTheThing()
  .then((data) => {
    console.log(data)
    doSomethingElse()
  })
  .catch((error) => {
    console.log(error)
  })

就是這樣！