ES6(9)、Promise

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。

1、在ES6之前：利用回调函数解决异步操作的问题
（1）、什么是回调函数

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

在将函数A作为参数传给函数B，等函数B执行完，然后调用函数A，调用函数A的过程就是回调。

例子1：

function 获取用户信息(fn){
  fn('姓名：小明')
}
function 打印用户信息(用户信息){
  console.log('这是我打印出来的用户信息')
  console.log(用户信息)
}

获取用户信息(打印用户信息)

打印结果

例子2：

回调地狱：在函数里面不断有函数回调，容易导致参数不知道如何传递

function 获取用户信息(fn){
  fn('姓名：小明')
}

获取用户信息(function (用户信息){
  console.log(用户信息)
  保存用户信息(用户信息,function(){
      获取另一个用户的信息(function(另一个用户信息){
       保存用户信息
      })
  })
})

回调函数
缺点1：回调地狱
缺点2：不知道怎么使用 Node/jQuery

2、ES6：利用Promise解决回调地狱问题

function 获取用户信息(fn){
  return new Promise(function(resolve,reject){
    console.log('第1次获取用户信息中..')
    resolve('姓名小明')   //将参数传递给打印用户信息
  })
}

function 打印用户信息(用户信息){
    return new Promise(function(resolve,reject){
    console.log(用户信息)
    resolve()
  })
}

function 获取另一个用户信息(fn){
  return new Promise(function(resolve,reject){
    console.log('第2次获取用户信息中..')
    resolve('姓名小红')
  })
}

获取用户信息()
  .then(打印用户信息)
  .then(获取另一个用户信息)
  .then(打印用户信息)

打印结果

（1）、如何理解Promise

1、new Promise()接受一个函数，函数参数必须包括resolve和reject方法，其中resolve代表成功要执行的，reject代表失败要执行的。
2、resolve(data)中data代表.then要传入的数据，reject(res)中res代表失败的原因
3、.then(fn1,fn2)接受两个函数作为参数传入，第一个函数是成功时候执行，第二个是失败时候执行。
4、.then(fn1,fn2).then(fn3,fn4) 第一次.then，如果成功，则执行fn1，失败则执行fn2；第二次.then如果fn1或fn2都顺利执行，并且fn1和fn2没有报错或者fn2中没有reject()，或者fn2中没有返回新的Promise，则执行fn3;否则执行fn4。

  return new Promise(function(resolve,reject){
    console.log('第1次获取用户信息中..')
    resolve('姓名小明')
  })

例子1：（只有一个then情况）

function 获取用户信息(name){
  return new Promise(function(resolve,reject){
    if(name==='小明'){
      console.log('我认识小明')
      resolve('小明是一个学生')
    }else{
      console.log('不认识')
      reject()
    }
  })
}

例子1调试(1)：

获取用户信息('小明')
  .then(
    function(d){console.log(d)},
    function(){console.log('它真的不认识')}
   )

打印结果

例子1调试(2)：

获取用户信息('小明')
  .then(
    function(d){console.log(d)},
    function(){console.log('它真的不认识')}
   )

打印结果

例子2：（多个then情况）

function 获取用户信息(name){
  return new Promise(function(resolve,reject){
    if(name==='小明'){
     console.log('我认识小明')
      resolve(['小明','是学生'])
    }else{
      console.log('不认识')
      reject('不认识')
    }
  })
}

function 获取好友信息(name){
   console.log('获取好友信息在执行')
  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 打印失败理由(res){
      console.log('失败的理由是'+res)
      return Promise.reject('没搞定') //我没有搞定这个失败，请后面的成功回调不要执行
}

例子2调试1:

获取用户信息('小明')
  .then(打印信息,打印失败理由)
  .then(获取好友信息)
  .then(打印信息)

打印结果

例子2调试2:

获取用户信息('小红')
  .then(打印信息,打印失败理由)
  .then(获取好友信息)
  .then(打印信息)

打印结果

（2）、结合await不要then就能拿到数据

将例子2调试1改成下面：

let 用户信息= await 获取用户信息('小明')
console.log(用户信息)

打印结果

将例子2调试2改成下面：

try{
  let 用户信息= await 获取用户信息('小红')
   console.log(用户信息)
}catch(error){  //错误原因
  console.log('失败理由是')
  console.log(error)
}

打印结果