使用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)
}
複製代碼