パッケージAJAX、およびpromiseの使用

2019 ワード

以下はパッケージされた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()は2つの関数を受け入れて、実行コードの中の動作が成功したら、最初の関数を調整して、もし失敗したら、2番目の関数を調整します.
promiseは本質的に仕様を定めており、AJAXは、then()属性を持つpromiseという関数が1つの関数を受け入れ、then()付きhashを返し、このthen()は2つの関数を受け入れ、then()付きhashを返す.
自分でpromiseをカプセル化する6つのポイント:
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)
 })
})