封装AJAX,以及使用promise

2018-10-12  本文已影响0人  Save_Onfir3

以下是一个封装好的AJAX:

window.jQuery.ajax = function({url,method,body,successFn,failFn}){
    let Aa = new XMLHttpRequest()
    Aa.open(method,url)
    Aa.onreadystatechange = () => {
        if(Aa.readyState === 4){
        if(Aa.status >= 200){
            successFn.call(undefined,Aa.responseText)
        }else if(Aa.status >= 400){
            failFn.call(undefined,Aa)
            }
        }
}
    Aa.send(body)
}

window.$ = window.jQuery

myButton.addEventListener('click',(e) => {
    window.jQuery.ajax({
        url:'/xxx',
        method:'post',
        body:'a1&b2',
        successFn:(Aa.responseText) => {console.log(1)},
        failFn:(Aa) => {console.log(2)}
    })
})

AJAX如果要符合promise的写法,就必须return一个new promise,然后把要做的事放在new promise里面,成功了就调resolve,失败了就调reject,promise会暴露一个叫then()的API,这个then()接受两个函数,如果执行代码里的动作成功了,就会调第一个函数,如果失败了,就会调第二个函数。

promise本质上是制定了一种规范,AJAX返回了一个promise实例,这个promise实例是有一个then()属性的
promise这个函数接受一个函数,然后返回一个带then()的hash,这个then()接受两个函数,返回一个带then()的hash

自己封装一个promise要记的六个要点:

return new promise(function(resolve,reject){})
//这六个单词及其顺序还有括号都得牢牢记住

以下是上面代码的升级版,以满足promise规则:

window.jQuery.ajax = function({url,method,body}){
    return new promise(function(resolve,reject){
    let Aa = new XMLHttpRequest()
    Aa.open(method,url)
    Aa.onreadystatechange = () => {
        if(Aa.readyState === 4){
        if(Aa.status >= 200){
            resolve.call(undefined,Aa.responseText)
        }else if(Aa.status >= 400){
            reject.call(undefined,Aa)
            }
        }
    }
    Aa.send(body)
 })
}


myButton.addEventListener('click',(e) => {
    window.jQuery.ajax({
        url:'/xxx',
        method:'post',
        body:'a1&b2',
    }).then((Aa.responseText) => {console.log(Aa.responseText)},
            (Aa) => {console.log(Aa)
 })
})
上一篇 下一篇

猜你喜欢

热点阅读