vue项目中请求模块一直在使用Promise的设计思想,但从来没仔细研究过,最近在学习小程序开发时,正好视频里有一章节在讲它,举的例子也很恰当,才开始去了解... 怕过两天忘了,所以记录一下。

业务场景1(任务执行有先后顺序)

假如有两个请求每一个都是建立在上一个请求完全返回数据的基础上才发起的调用,分别为:A请求->B请求->结束,那么用Promise就应该这样表示

  /**
   * setTimeout 模拟请求调用时间
   * resolve 执行then()
   * reject  执行catah()
   */
  callbackPromise(){
    new Promise((resolve,reject)=>{
      console.log('开始执行A请求...')
      setTimeout(()=>{
        console.log('A请求执行结束...')
        resolve()
      },1000)
    }).then((res)=>{
      console.log('开始执行B请求...')
      setTimeout(()=>{
        console.log('B请求执行结束...')
      },1000)
    })
  },
// console
demo.js? [sm]:40 开始执行A请求...
demo.js? [sm]:42 A请求执行结束...
demo.js? [sm]:46 开始执行B请求...
demo.js? [sm]:48 B请求执行结束...

另外在查资料时发现一个非常经典的例子

function timeout(duration) { 
  return new Promise(function(resolve, reject) { 
    setTimeout(resolve, duration); 
  });
}

// Note: This code uses arrow function syntax
var m = timeout(5000).then(() => { 
  console.log("done!");
})

// Output (after 5 seconds):
// done!

业务场景2(等待任务全部完成后再执行后续操作)

同时执行三个任务,但是需要等待三个任务全部执行结束后才能执行其他操作

promiseAll(){
    let p1 = new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("p1执行完成")
        resolve('p1')
      },1000)
    })
    let p2 = new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("p2执行完成")
        resolve('p2')
      },2000)
    })
    let p3 = new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("p3执行完成")
        resolve('p3')
      },3000)
    })
    Promise.all([p1,p2,p3]).then(res=>{
      console.log('全部完成')
      console.log(res)
    }).catch(err=>{
      console.log('失败')
      console.log(err)
    })
  },

// console    
demo.js? [sm]:55 p1执行完成
demo.js? [sm]:61 p2执行完成
demo.js? [sm]:67 p3执行完成
demo.js? [sm]:72 全部完成

业务场景3(有任何一个任务执行完成后再执行后续操作)

promiseRace(){
    let p1 = new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("p1执行结束")
        resolve('p1')
      },1000)
    })
    let p2 = new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("p2执行结束")
        resolve('p2')
      },2000)
    })
    let p3 = new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log("p3执行结束")
        resolve('p3')
      },3000)
    })
    Promise.race([p1,p2,p3]).then(res=>{
      console.log( res + '先完成')
      console.log(res)
    }).catch(err=>{
      console.log('失败')
      console.log(err)
    })
  }, 
// console
demo.js? [sm]:82 p1执行结束
demo.js? [sm]:99 p1先完成
demo.js? [sm]:100 p1
demo.js? [sm]:88 p2执行结束
demo.js? [sm]:94 p3执行结束