黑马程序员技术交流社区

标题: 【上海校区】Promise解决回调地狱 [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-8-6 09:27
标题: 【上海校区】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)    })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
  

例子二：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,'已经加载完成啦')})

---

作者: 不二晨    时间: 2018-8-16 17:23
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2