"回调地狱"——优雅解决之Promise 实例

"回调地狱"是什么

”回调地狱“也叫”回调金字塔“，我们平时写代码的时候 js如果异步 回调是不可避免的
例如 ajax不断的进行异步请求数据 回调方法里还要对数据进行处理，继续回调...形成回调地狱
这会使得我们的代码可读性变差，出现问题 不好调试 也会导致性能下降

而nodejs 是一种单线程的事件驱动而且是非阻塞的I/O模型，而I/O模型，是异步的，这样nodejs在处理结果的时候 就需要在回调函数中执行，这样也就形成了回调地狱。

那我们应该如何优雅的避免回调地狱呢

递归？No! 递归用在一些简单的场景下还是很方便的，例如快速排序，哈哈，但是在处理复杂的逻辑上，似乎有点不合适..

jQuery 1.5提供了jQuery.when() then()方法 differ对象
具体可以看一下api：http://www.css88.com/jqapi-1.9/jQuery.when/

es6 =>Promise、Generator以及 es7 => Async

• Promise 
  是一个构造函数，用来传递异步操作消息，链式调用，避免层层嵌套的回调函数。
  promise接收两个函数参数，resolve和reject，分别表示异步操作执行成功后的回调和失败的回调
  promise在声明的时候就已经执行了 
  有三种状态：pending进行中、resolve已完成、rejected已失败,
  这些状态只能由pending -> resolved, pending -> rejected,一旦promise实例发生改变，就不能在变了，任何时候都能得到这个结果

例子一：用三个小球依次向右运动

 function moving(obj, left){
        //创建一个promise实例 并传入两个函数参数 来设置promise的状态
        return new Promise(function(resolve,reject){
            var leftPos = parseInt(obj.css('margin-left'));
            if(leftPos != left){
                var timer = setInterval(()=>{
                    leftPos += 2;
                    obj.css('margin-left',leftPos);
                    
                    if(leftPos == left){
                        clearInterval(timer)
                        resolve()   //成功 运动完成之后 返回一个状态resolved then接收到后继续执行下一个回调
                    }
                },10)
            }else{
                resolve()
            }
        })
    }
    //采用promise链式操作的方式 通过传递状态的方式来调用回调函数
    moving($('.b1'),100)
    .then(function(){                 //当b1运动完成 并且成功之后 链式调用b2
       return moving($('.b2'),200)    //then函数返回的是一个新的promise对象，继续then
    })
    .then(function(){                //当b2运动完成 并且成功之后 链式调用b3
       return moving($('.b3'),300)
    })

例子二：ajax 异步调用
ajax异步回调问题，我们要优雅的避免各种回调嵌套，这里我将做一个例子：分别请求两个接口，等到数据都拿到 在进行业务处理

 

  //获得商品列表 实例化promise 并传入resolve 和 reject两个参数
  var getGoodsList = new Promise(function(resolve,reject){
      axios.get('/ggserver/api/products/list',{params})
        .then(function(res){
            if(res.data.code == '200'){
                resolve(res.data.result)      //成功
            }else{
                reject(res.data.errMsg)       //失败
            }
        })
  })
//我们在请求一个分类列表 
var getGoodsType = new Promise(function(resolve,reject){
      axios.get('/ggserver/api/goodsType')
      .then(function(res){
           if(res.data.code == '200'){
                resolve(res.data.result)      //成功
            }else{
                reject(res.data.errMsg)       //失败
            }
      })
})
然后。在将获得的数据进行业务处理
getGoodsList.then(function(goodslistdata){
    //处理业务
}).catch(function(errMsg){
    //失败业务
    console.log('哎，goodslist运气不佳...')
})  
 
getGoodsType.then(function(goodsTypedata){
    //处理业务
}).catch(function(errMsg){
    //失败业务
    console.log('哎，goodstyoe运气不佳...')
})
 
最后 我们通过promise.all()方法来 等列表 和 类型加载完 进行其他业务处理
Promise.all([getGoodsList, getGoodsType]).then(function([data1,data2]){
    console.log(data1,data2,'已经加载完成啦')
}) 

案例出处 https://segmentfault.com/a/1190000012423825微博