简要介绍:ES6中,可以通过promise来处理回调函数,回调函数经常用于异步操作中,间接来说,可以通过promise优化异步操作。
1.什么是JS中的回调函数?
回调函数是作为参数传递给另外一个函数,并且改回调函数在函数主体执行完后再执行。举例来说:
function callback(m,n){
alert("我是回调函数,我在执行");
return m+n
}
function myFunction(callback){
var m=1;
var n=2;
return callback(1,2);
}
上述就是一个回调函数的例子,callback为回调函数,我们来看函数myFunction的执行过程,先执行函数的主体,最后再执行回调函数callback。
2.常见的回调函数以及存在的缺陷
(1)常见回调:
我们在jquery的ajax请求中,可以看到回调的身影,比如:
ajax({
url:'...',
method:'get',
success:function(json){
//这里就是一个回调
}
})
经典的封装后的ajax请求就是一个,success后面所跟的函数就是一个回调函数。
(2)存在问题
因为JS是异步的,通过回调函数异步操作,会造成回调函数的嵌套,很影响代码的可读性,下面来看回调函数嵌套的情况。
ajax({
url:'...',
method:'get',
success:function(json){
//这里是一个回调
ajax(function(json){
//这是一个回调函数的嵌套
});
}
})
上述我们看到,当最外层请求成功之时,会调用第一个回调函数,而第一个回调函数里面又嵌套了第二个异步的回调函数,如此层层嵌套,代码的可读性大大的下降。
3.promise处理回调嵌套
(1)什么是promise
promise通常用于处理函数的异步调用,通过链式调用的方式,使得代码更加直观,举例来说:
var myPromise=function(tag){
return new Promise(function(resolve,reject){
if(tag){
resolve('默认参数success');
}else{
reject('默认参数filed');
}
})
}
myPromise(true).then(function(message){
console.log(message)
}) //"输出默认参数success"
我们可以看到设置promise只要new Promise()就可以,并且接受一个函数,该函数里面会执行resolve()方法,表示异步调用成功时执行,reject()表示异步调用失败时候调用。
在链式调用时候,then后面接的第一个函数为成功之时调用的函数——resolve,并且这里的默认参数等同于promise中resolve中的初始参数。
(2)then和catch
then:可以在promise中实现链式调用,在上文中已经介绍。补充,then里面的第二个函数,为异步调用失败之时执行,接上面的例子:
myPromise(false).then(null,function(err){
console.log(err)
})
//这样会输出"默认参数filed"
catch:catch方法,相当于then(null,function(err){console.log(err)}失败方法调用的一个缩写。
myPromise(false).catch(function(err){console.log(err)})
//这句话与上面等价,也会输出"默认参数filed"
(3)Promise.all
Promise.all 可以接收一个元素为 Promise 对象的数组作为参数,当这个数组里面所有的 Promise 对象都变为 resolve 时,该方法才会返回。
var p1 = new Promise(function (resolve) {
setTimeout(function () {
resolve("Hello");
}, 3000);
});
var p2 = new Promise(function (resolve) {
setTimeout(function () {
resolve("World");
}, 1000);
});
Promise.all([p1, p2]).then(function (result) {
console.log(result); // ["Hello", "World"]
});
4.总结
Promise在定义的时候,在new的时候就会执行一次,因此如果要构造ajax请求可以在new Promise里传递的这个函数内进行,在定义这个构造Promise的函数里面,可以判断什么时候是执行resolve,什么时候执行reject。
原文链接:https://blog.csdn.net/liwusen/article/details/54142748