Promise

2018-09-11  本文已影响13人  取个帅气的名字真好

回调

把一个函数A传给另一个函数B调用,那么A就是回调函数。

function B(){
  A()
}
function A(){
} 
B(A)

回调地狱

回调套回调套回调套回调套回调套回调套回调...

function a(fn){
    fn('姓名:sss')

}
function b(e){
    console.log('这是我打印的用户信息')
    console.log(e)
}
a(b)
//这是我打印的用户信息
 //姓名:sss

//回调地狱
function a(fn){
    fn('姓名:sss')
}

a(function (e){
      console.log(e)
      function (e){
          console.log(e)
        function (e){
          console.log(e)
            function (e){
               console.log(e)
            }  
         }
      }
})

Promise

function name(){
  return new Promise(function(resolve,reject){
       //成功 resolve
      // 失败 reject
    })

}
function name1() {
  return new Promise(function(resolve,reject){
      console.log('第一次获取用户信息。。。')
      resolve('姓名:xxx')

  })
}
function name2(e) {
  return new Promise(function(resolve,reject){
      console.log(e)
      resolve()
  })
}
function name3() {
  return new Promise(function(resolve,reject){
      console.log('第二次获取用户信息中')
      resolve('姓名:罗叔叔')
  })
} 
name1().then(name2)
      .then(name3)
      .then(name2)


//第一次获取用户信息。。。
//姓名:xxx
//第二次获取用户信息中
//姓名:罗叔叔
用法
function name(e) {
    return new Promise(function (resolve, reject) {
      if(e === '罗叔叔'){ //成功
        console.log('不错哦你也认识罗叔叔')
        resolve('嗨!罗叔叔')
      }else{ //失败
        console.log('陌生人,不认识');
        reject()
      }
    })
  }
  name('罗叔叔').then(
    function (a) { //成功调用
      console.log(a)
    },
    function () { //失败调用
      console.log('看来你真的不认识他')
    }
  )
 
//不错哦你也认识罗叔叔
//嗨!罗叔叔

function 获取用户信息(name){
  return new Promise(function(resolve,reject){
    if(name === '李四'){
      console.log('我认识李四')
      resolve(['李四','是个大佬'])
    }else{
      console.log('不认识')
      reject()
    }
  })
}
function 获取好友信息(name){
  return new Promise(function(resolve,reject){
     if(name === '李四'){
        resolve('张三,王五')
     }else{
      reject()
     }
  })
}
function 打印信息(data){
  return new Promise(function(resolve,reject){
      console.log(data)
      resolve(data[0])
  })
}

获取用户信息('李四')
    .then(打印信息)
    .then(获取好友信息)
    .then(打印信息)

// 我认识李四
// ["李四", "是个大佬"]
// 张三,王五

代码执行过程


以上代码执行过程

提示
resolve 把成功的数据返回给下一个回调
reject 把失败的理由返回给下一个回调

结论
以上说明:
1、fn1执行后回调执行第一个then
2、只要第一个then(成功1,失败1)没有报错就会执行 成功2,否则执行失败2
3、只要then(成功2,失败2)没有报错就会执行成功3,否则执行失败3
function 获取用户信息(name){
  return new Promise(function(resolve,reject){
    if(name === '李四'){
      console.log('我认识李四')
      resolve(['李四','是个大佬'])
    }else{
      reject('不认识')
    }
  })
}
function 获取好友信息(name){
  return new Promise(function(resolve,reject){
     if(name === '李四'){
        resolve('张三,王五')
     }else{
      reject()
     }
  })
}
function 打印信息(data){
  return new Promise(function(resolve,reject){
      console.log(data) 
      resolve(data[0])
  })
}
function 打印失败理由(理由){
  return new Promise(function(resolve,reject){
    console.log('失败理由是:' + 理由);
    // reject() // 我没有搞定这个失败,请后面的成功回调不要执行
    reject('我太渣搞定不这问题') // 传给下一个回调,即 二次搞定()
  })
}
function 二次搞定(理由){
  console.log('前面理由是:'+ 理由);
}

获取用户信息('王八')
    .then(打印信息,打印失败理由)
    .then(获取好友信息,二次搞定)
    .then(打印信息)

await

操作符用于等待一个Promise 对象。

配合 try{ //成功 }catch(error){ //失败 }使用
如:

function 获取用户信息(name){
  return new Promise(function(resolve,reject){
    if(name === '李四'){
      console.log('我认识李四')
      resolve(['李四','是个大佬'])
    }else{
      reject('不认识')
    }
  })
}
function 获取好友信息(name){
  return new Promise(function(resolve,reject){
     if(name === '李四'){
        resolve('张三,王五')
     }else{
      reject()
     }
  })
}
function 打印信息(data){
  return new Promise(function(resolve,reject){
      console.log(data) 
      resolve(data[0])
  })
}
function 打印失败理由(理由){
  return new Promise(function(resolve,reject){
    console.log('失败理由是:' + 理由);
    // reject() // 我没有搞定这个失败,请后面的成功回调不要执行
    reject('我太渣搞定不这问题') // 传给下一个回调,即 二次搞定()
  })
}
function 二次搞定(理由){
  console.log('前面理由是:'+ 理由);
}

// 获取用户信息('王八')
//     .then(打印信息,打印失败理由)
//     .then(获取好友信息,二次搞定)
//     .then(打印信息)

try{
  let 用户信息 = await 获取用户信息('王八')
  console.log(用户信息);
  
}catch(error){
  console.log(error);
}

all

等待多个Promise都成功之后,再执行下一个回调

race

多个Promise中只要有一个成功了,就执行下一个回调。

catch

处理Promise 失败函数(只处理错误)then的语法糖

如:

fn1().then( null, //失败 )
//等价于
fn1().catch(//失败 )

finally

不管成功 失败都会调用一个函数。then的语法糖

如:

fn1().then( f1 ,f1 )
//等价于
fn1().finally( f1 )
上一篇下一篇

猜你喜欢

热点阅读