[筆記] jQuery 搭配 Async / Await 一同使用 @地瓜大的飛翔旅程

章節連結

邏輯
Demo

市面上許多的網站，還是仰賴於 jQuery 進行操作。其實 jQuery 的 $.ajax 是可以搭配 async / await 一同使用的，這邊筆記下使用方法。
jquery

邏輯

1. Async / Await 是 Promise 的語法糖。換言之，在 async function 裡面的 return ，就相當於 new Promise 中的 resolve 效果
2. 在一開始的 Immediately Invoked Functions Expressions (IIFE)，是可以使用 async function 的，並搭配 try-catch 來捕捉中間可能發生的錯誤
3. $.ajax 要使用 new Promise 包覆起來，並在 success 的地方用 resolve 決定要回傳什麼

Demo

(async function(){
  try{
    let valid = await fetchStatus()
    console.log('valid:',valid)
  }catch(err){
    console.log(err)
  }
})()


function fetchStatus() {
    return new Promise((resolve, reject) => {
        $.ajax({
            type: 'POST',
            url: '<address>',
            dataType: 'json',
            data: <data would like to send>,
            success: function (res) {
                Number(res.status) === 1 ? resolve(true) : resolve(false)
            },
            fail: function (xhr, ajaxOptions, thrownError) {
                reject(false)
            },
        })
    })
}

(async function(){

try{

let valid = await fetchStatus()

console.log('valid:',valid)

}catch(err){

console.log(err)

}

})()

function fetchStatus() {

return new Promise((resolve, reject) => {

$.ajax({

type: 'POST',

url: '<address>',

dataType: 'json',

data: <data would like to send>,

success: function (res) {

Number(res.status) === 1 ? resolve(true) : resolve(false)

fail: function (xhr, ajaxOptions, thrownError) {

reject(false)

})

}

按讚加入粉絲團

邏輯

Demo

延伸閱讀