本篇文章实现了如何 优雅的在 ajax中使用promise。
Promise 其实也是原生js新的特性,使用Promise可以很好的解决这些问题:
-
处理错误,比如网络请求失败
-
如果发生错误,可以传值
-
也可以处理JavaScript的错误
-
很好的解决比如回调也是一个异步操作的情况
封装方法如下:
/*利用promise封装的ajax函数*/
function ajax(method,url, data){
/*兼容IE*/
var request=window.XMLHttpRequest? new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
return new Promise(function(resolve,reject){
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
resolve(JSON.parse(request.response));
}else{
reject(request.status);
}
}
};
if(method.toUpperCase()=== "GET"){
var arr = [];
for(var key in data){
arr.push(key + "=" + data[key]);
}
var getData=arr.join("&");
request.open("GET",url +"?"+getData,true);
request.send(null);
}else if(method.toUpperCase()=== "POST"){
request.open("POST",url,true);
request.responseType="json";
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
request.send(data);
}
});
};
使用方法如下:
console.log("请求开始");
var njson=[];
ajax("get","adress.html","").then(function (json) {
console.log("1、ajax完成后取值");
console.log(json.cip);
njson=json;//赋值给下一个then使用
}, function (error) {
console.error("1、ajax出错了", error);
}).then(function(){
console.log("2、ajax完成后取值");
console.log(njson.cname);
}, function (error) {
console.error("2、1中then出错了", error);
});
adress.html 返回的json数据
{"cip": "116.26.172.6", "cid": "440500", "cname": "广东省汕头市"}
(完)