关于ES6中的promise用法以及在ajax中的应用

最近看到了一道题，大概是让你说说promise的用法以及在ajax的使用

其实乍一看，还是蛮蒙的，说实话最近也是在慢慢的学习es6，所以很多东西还是在学习阶段，好了言归正传，这个Pormise是个什么东西呢，其实就是一个构造函数，这个构造函数本身有reject,resolve等方法，prototype原型上有then,catch等方法，用法就是var p=new Promise(function(resolve,reject){resolve();||reject();});

举个栗子吧

var p=new Promise(function(resolve,reject){
setTimeout(function(){
console.log('执行完成');
resolve('已经成功所以进入到了resolve中');
},1000);

});
p.then(function(data){
console.log(data);
})

打印出来的是

执行完成

已经成功所以进入到了resolve中

那有人问了何时进入到reject中呢

好嘞，我们举个栗子

var p=new Promise(function(resolve,reject){
setTimeout(function(){
var num = Math.random()*100;
num = parseInt(num);
if(num>10){
resolve('所输出的数字是大于10 的');
}else{
reject('所输出的数字是小于10的');
}

},1000);
});
p.then(function(data){
console.log('成功啦');
console.log(data);
},function(reason,data){

console.log(reason);


});

看打印结果你就会看到，

当num>10的时候，就会打印出所输出的字数是大于10的

当num<10的时候，打印的reason为所输出的字数是小于10的

说到这个then了，我们还没见识下这个then的用法呢，then的用法是链式的意思

看下面这段代码

var p=new Promise(function(resolve,reject){
setTimeout(function(){
console.log('执行完成');
resolve('这是第一步的结果');//1
},1000);

});
p.then(function(data){
//该处的data打印的就是1的内容
console.log(data);
return runAsync2();
}).then(function(data){
//此处的data就是runAsync2中的resolve中的内容
console.log(data);
return runAsync3();
}).then(function(data){
console.log(data);
},function(reason,data){
//此处的reason就是runAsync2中的reject中的内容
console.log('rejected');
console.log(reason);
});
var runAsync2=function(){
var p=new Promise(function(resolve,reject){
setTimeout(function(){
console.log('执行完成');
resolve('执行完成了就得打印出来啦');
},1000);
});
return p;
};
var runAsync3=function(){
var p=new Promise(function(resolve,reject){
setTimeout(function(){
console.log('哈哈，失败啦');
reject('我让失败的');
},1000);
});
return p;

};

这里就简单的说下这个promise的用法，当然还有些all catch等的用法，现在我们进入到另外一个话题，我们先来段ajax的使用

var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();}
else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status=200){

console.log(xhr.responseText);}

};


var url='/getdata.txt';
xhr.open('GET',url,true);
xhr.send();

我们刚刚学习了promise,因为ajax有回调函数，所以我们想借助promise来封装ajax的

直接上代码了

function ajax(method, url, data,asyn) {
	var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();}
else{
request=new ActiveXObject('Microsoft.XMLHTTP');
}

    return new Promise(function (resolve, reject) {
        request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    resolve(request.responseText);
                } else {
                    reject(request.status);
                }
            }
        };
        request.open(method, url,asyn);
        request.send(data);
    });
}

var log = document.getElementById('test-promise-ajax-result');
var p = ajax('GET', '/api/categories');
p.then(function (text) { // 如果AJAX成功，获得响应内容
    log.innerText = text;
}).catch(function (status) { // 如果AJAX失败，获得响应代码
    log.innerText = 'ERROR: ' + status;
});

好了，就写到这里了