深入浅出promise、await和async以及Generator系列——promise的基本语法和使用

深入浅出promise、await和async以及Generator

promise的语法

• promise的语法是es6比较复杂的一个语法，所以请耐心看完
• promise是面向对象思想实现的，使用的第一步需要创建一个promise实例对象
• Promise构造函数需要接收一个回调函数（handler），该函数(handler)有两个形参resolve和reject,两个形参都是一个回调函数，可以在handler里面调用resolve和reject
• 当我们调用resolve的时候，创建出来promise实例对象状态会变成成功（fulfilled）
• 当我们调用reject的时候，创建出来promise实例对象状态会变成失败（rejected）

    // p就是创建出来的promise实例
    var p = new Promise(function(resolve, reject){
        resolve()
        // or
        reject()
    })

promise实例状态

• promise实例状态总共有三种
  1. pending等待状态，刚创建出来的实例状态就是pending

         var p = new Promise(function(resolve, reject){
             // 没有调用resolve和reject
         })
         console.log(p) // 此时实例的状态为pending
     

  2. fulfilled成功状态，调用resolve方法之后的状态

         var p = new Promise(function(resolve, reject){
             // 调用resolve
             resolve()
         })
         console.log(p) // 此时实例的状态为fulfilled
     

  3. rejected失败状态，调用reject方法之后的状态

         var p = new Promise(function(resolve, reject){
             // 调用reject
             reject()
         })
         console.log(p) // 此时实例的状态为rejected
     

• 注意： 一个promise实例最终有一个状态，状态一旦确定就不允许再次改变，也就是说要么成功，要么失败

       var p = new Promise(function(resolve, reject){
          // 2s调用reject
          setTimeout(() => {
              reject()
          }, 2000);
          // 3s调用resolve
          setTimeout(()=>{
              resolve()
          }, 3000)
      })
      console.log(p) // 最终实例的状态为rejected
  

promise实例的结果

• 一个promise实例无论成功还是失败，最终都会有一个结果
• 可以利用这个结果来返回异步的数据
• 调用resolve方法传递的参数是成功得到的结果，称之为终值（value）

    var p = new Promise(function(resolve, reject){
        // 调用resolve
        resolve(终值)
    })
    console.log(p) // 此时实例的状态为fulfilled

• 调用reject方法传递的参数是失败得到的结果，称之为拒因（reason）

    var p = new Promise(function(resolve, reject){
        // 调用reject
        reject(拒因)
    })
    console.log(p) // 此时实例的状态为rejected

• 如何获取这个结果呢？这时候就需要用到promise实例的方法了

promise实例方法

• 每一个promise实例的原型上面都有三个方法
  • then方法
  • catch方法
  • finally方法
• then方法
  • then方法接受两个函数，一个是成功之后执行的回调函数，一个是失败之后执行的回调函数
  • 成功的回调函数接收一个参数就是终值
  • 失败的回调函数接收一个参数就是拒因

      var p = new Promise(function(resolve, reject){
          // 调用resolve
          resolve(终值)
      })
      console.log(p) // 此时实例的状态为fulfilled
      p.then((终值)=>{
          console.log('实例状态成功执行')
      }, (拒因)=>{
          console.log('实例状态失败执行')
      })
  

• catch方法
  • catch方法只会接收一个函数，这个函数就会在失败之后执行
  • 回调函数接收一个参数就是拒因

      var p = new Promise(function(resolve, reject){
          // 调用reject
          reject(拒因)
      })
      console.log(p) // 此时实例的状态为rejected
      p.catch((拒因)=>{
          console.log('实例状态失败执行')
      })
  

• finally方法
  • finally方法会接收一个函数，这个函数无论在成功还是失败都会调用
  • 回调函数不接受参数

      // 成功状态
      var p1 = new Promise(function(resolve, reject){
          // 调用resolve
          resolve(终值)
      })
      p1.finally(()=>{
          console.log('调用了')
      })
      // 失败状态
      var p2 = new Promise(function(resolve, reject){
          // 调用reject
          reject(拒因)
      })
      p2.finally(()=>{
          console.log('调用了')
      })
  

• 以上就是promise的语法，我们利用promise可以实现封装ajax的案例

function ajax(type, url, data){
    return new Promise(function (resolve){
        // 1. 创建一个实例
        var xhr = new XMLHttpRequest()
        // 2. 配置请求信息
        // 判断请求方式是get还是post
        if(type === 'get'){
            xhr.open(type, url+data, true)
            // 3. 发出请求
            xhr.send()
        }else{
            xhr.open(type,url,true)
            // 设置请求头 规定前端发给后端的数据格式
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            // 3. 发出请求
            xhr.send(data.slice(1))
        }
        // 4. 返回后端响应的数据
        xhr.onload = function(){
            resolve(xhr.responseText)
        }
        xhr.onerror = function(){
            reject(xhr)
        }
    })
}

// 使用promise的ajax
ajax(
    "get",
    "./serve/get.php",
    "?username=jack&password=123456"
).then((res)=>{
    console.log(res)
}).catch((err)=>{
    console.log(err)
})