通过ES6中通过promise处理回调函数问题

简要介绍：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。