原文：https://blog.csdn.net/Little_Pig_Bug/article/details/81079822
Jquery的ajax
在開發(fā)中蛮粮，我們常常會(huì)用到ajax,根據(jù)請求的地址，服務(wù)器返回相應(yīng)的success或者error，而且ajax也是可以異步的骨稿，async為true的時(shí)候?yàn)楫惒剑粗剑旅嬉援惒綖槔驗(yàn)槲覀兊腜romise就是異步操作漾月。
$.ajax({
cache: true,
type: "GET",
url: "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1",
dataType: "json",
async: true,
success: function(data) {
callback(data);
},
error: function(data) {
console.info("error: " + data.responseText);
}
});
上面的ajax請求的意思就是，當(dāng)我異步請求一個(gè)url地址時(shí)胃珍，如果成功則會(huì)執(zhí)行callback,否則打印出錯(cuò)誤信息梁肿，所以ajax請求 蜓陌，不論結(jié)果是什么，都只有一種結(jié)果吩蔑，success或者error钮热。這和我們的Promise不謀而合，那我們也可以用Promis去封裝我們的ajax烛芬。
Promise封裝Ajax
我們知道Promise會(huì)接收兩個(gè)參數(shù)隧期，resolve(成功)和reject(失敗)，我們可以用這兩個(gè)參數(shù)代替ajax的success和error赘娄，并使用鏈?zhǔn)秸{(diào)用,then里面執(zhí)行成功的操作仆潮，catch里面執(zhí)行錯(cuò)誤的信息。這里會(huì)涉及到http方面的知識擅憔，相關(guān)參數(shù)可以參考這個(gè)鏈接
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/send
const $ajax = function(url) {
return new Promise((resolve, reject) => {
// 創(chuàng)建 XMLHttpRequest對象,用于在后臺與服務(wù)器交換數(shù)據(jù)鸵闪。
let request = new XMLHttpRequest()
//設(shè)置向服務(wù)器提交的方式
request.open("GET", url, true)
request.responseType = 'json'
request.setRequestHeader("Accept", "application/json");
// onreadystatechange捕獲事件請求的狀態(tài)
request.onreadystatechange = function handlerRequest() {
//readyState為4的時(shí)候，代表請求操作已經(jīng)完成暑诸，這意味著數(shù)據(jù)傳輸已經(jīng)徹底完成或失敗。
if (this.readyState === 4) {
//請求成功
if (this.status === 200) {
resolve(this.response)
} else {
reject(new Error(this.statusText));
}
}
}
//發(fā)送 HTTP 請求,默認(rèn)異步請求
request.send();
})
}
$ajax("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1")
.then((resolve) => {
console.log(resolve)
})
.catch((reject) => {
console.log(reject)
})
上面的js,剛開始我直接在vscode里面運(yùn)行辟灰，發(fā)現(xiàn)直接報(bào)錯(cuò) "XMLHttpRequest is not defined",但是我在html引入改該s,就沒有報(bào)錯(cuò)了个榕，一直不懂為啥@**@
總結(jié):其實(shí)我們開發(fā)中并不會(huì)用到這么麻煩的封裝，直接用jquery封裝好的ajax的就可以芥喇，如果是vue的話西采，你可以去 看看 vue-resource和axios,發(fā)現(xiàn)和Promise何其相似，所以我們開發(fā)的過程中继控，去了解開發(fā)的思想是非常的重要械馆。
作者：Little_Pig_Bug
來源：CSDN
原文：https://blog.csdn.net/Little_Pig_Bug/article/details/81079822
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接武通！
