使用promise封装jquery的ajax来实现async和await方式

promise是es6里用来解决回调地狱的方案,本质上只是让代码换了个书写形式,由异步形式换成可读性更好的“同步”形式。jquery

使用jquery的ajax时,有时会遇到要在响应结果里作复杂操做的场景,这时候代码写起来就比较繁琐,可维护性很差,而若是使用es7的async、await方法就能大大提升代码质量,可是async和await也是要基于promise才能实现,因此就要对jquery的ajax作一个封装。es6

// 用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)
}
复制代码
相关文章
相关标签/搜索