Promise解决回调地狱

“回调地狱”是什么

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

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

Promise解决回调地狱

“回调地狱”是什么

Promise

猜你喜欢