当我们用$.ajax()这个API的时候,是想使用Ajax去请求数据。并且在回调函数success里面去操作我们得到的数据。但是当我们有了Promise之后,我们就没有必要在$.ajax()要传入的对象中去写这个success属性了。我们可以直接$.ajax().then(fn1,fn2)。因为Jquery把Promise封装在了$.ajax()这个API上,他返回的是一个Promise对象,这个Promise对象上有一个方法then,它接受两个回调函数。并且这个then方法也是返回一个Promise对象(实现链式调用)。then的第一个参数,就是我们得到数据后需要去操作数据的那个函数 。
代码如下:
$({url:'xxxx',action:"GET"}).then(function(通过Ajax得到的数据){
console.log(通过Ajax得到的数据));
},function(){})
这样一来 我们就可以通过then方法把从后台拿到的数据打印到控制台上。
同理,第二个参数也是一个回调函数,并且是Ajax的错误处理函数。
以上就是Jquery封装的Promise的基本使用。
但是ES6 支持了一个Promise语法,使得我们可以自己写一个Promise对象。
写法如下
function Ajax(){
return new Promise(function(resolve,rejected){
var request = new XMLHttpRequest();
request.open('xxx/','GET');
request.onstatechange = funcion(data){
if(request.stateCode>200 && request.stateCode <400 ){
console.log('我得到的数据是'+data);
resolve(data); //确保把data传给then()都第一个回调参数
}
if(request.stateCode >400){
console,log('抛出一个错误');
rejected();
}
}
})
}
可能在刚才我们使用then方法的时候你也许会问,为什么then方法就能把第一个参数作为成功回调,把第二个参数作为失败回调。Promise内部是如何判断到底是请求成功还是失败了呢。
答案就在这个resolve和reject。
当我们自己写API的时候,我们就可以控制让一个参数的调用位置出现在什么地方,如果我们让resolve方法在请求成功的时候被调用,那么我们写的第一个参数就是成功回调参数。反之亦然。