使用promise封裝jquery的ajax來實現async和await方式

promise是es6裡用來解決回撥地獄的方案，本質上只是讓程式碼換了個書寫形式，由非同步形式換成可讀性更好的“同步”形式。

使用jquery的ajax時，有時會遇到要在響應結果裡做複雜操作的場景，這時候程式碼寫起來就比較繁瑣，可維護性不好，而如果使用es7的async、await方法就能大大提高程式碼質量，但是async和await也是要基於promise才能實現，所以就要對jquery的ajax做一個封裝。

// 用promise物件封裝
const jqPromiseAjax = params => {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: params.url,
            type: params.type || 'get',
            dataType: 'json',
            headers: params.headers || {},
            data: params.data || {},
            success(res) {
                resolve(res)
            },
            error(err) {
                reject(err)
            }
        })
    })
}
複製程式碼

// 再使用async和await
async function consoleLogUserInfo() {
    const data = await jqPromiseAjax({ 
        url: '/proxy/user/getUserInfo',
        type: 'get'
    }).then(res => res.data)
    console.log(data)
}
複製程式碼