パッケージAJAX、およびpromiseの使用
2019 ワード
以下はパッケージされたAJAXです.
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つのポイント:
以下はpromiseルールを満たすために、上記のコードのアップグレード版です.
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)
})
})