美文网首页前端面试基础必备
Promise顺序执行两个函数

Promise顺序执行两个函数

作者: puxiaotaoc | 来源:发表于2018-08-14 18:25 被阅读0次

一般情况下,数据库操作和网络请求都是异步的;
执行完getCoachList()后再执行setTableData()方法
一、Promise异步编程

// getCoachList()方法
// Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject,它们是两个函数,由 JavaScript 引擎提供,不用自己部署;
getCoachList() {
    return new Promise((resolve, reject) => { 
        let occupationType = ''
        if(this.occupationType != 'all'){
          occupationType += `?occupationType=${this.occupationType}`
        }
        this.$axios.get(`${api_host}/lego/manage/coach/arrangement/overview${occupationType}`).then(res => {
          let data = res.data.data
          this.arrangementStatuses = data.arrangementStatuses
          this.manageDayArrangements = data.manageDayArrangements
          this.weekStartDate = moment(data.weekStartDate)
          this.arrangementStatuses.forEach(() => {
            this.isHighlighted.push(false)
          })
          resolve(resolve)
        }).catch(err => {
          reject(err)
        })
    })
}
// setTableData()方法
setTableData() {
      let arr = []
      this.timetable.forEach((item, index) => {
        let dayArr = this.manageDayArrangements.filter(day => day.dayDuration == item)
        let struct = {
          time: item,
          '0': '',
          '1': '',
          '2': '',
          '3': '',
          '4': '',
          '5': '',
          '6': ''
        }
      if(dayArr.length) {
        dayArr.forEach(item => {
           struct[item.weekDay - 1] = item.concatCoachNames
        })
       }
      arr.push(struct)
   })
   this.tableData = arr
},
formatD(i) {
   return this.weekStartDate.add(i < 1 ? i : 1, 'days').format('MM.DD')
}
// 可以确保拿到getCoachList()方法执行的结果后再执行setTableData()方法
// 使用.then()方法的前提是getCoachList()需返回Promise对象
changeCoachList() {
   this.getCoachList().then(() => {
      this.setTableData()
})
// 下面的方法并不能保证getCoachList()执行完后才能执行setTableData()
changeCoachList() {
   let promise = new Promise((resolve, reject) => {
       this.getCoachList()
   }).then(res=>{
       this.setTableData()
   })      
}

二、Promise.all

  • Promise.all 接收一个 promise对象的数组作为参数,当这个数组里的所有 promise 对象全部变为 resolve 或 reject 状态的时候,它才会去调用 then 方法;
  • Promise.race其参数也跟 Promise.all 一样是一个数组,只是数组中的任何一个 promise 对象如果变为 resolve 或者reject 的话,该函数就会返回,并使用这个 promise 对象的值进行 resolve 或者 reject;
created() {
    let timePro = this.getTimeTable()
    let coachPro = this.getCoachList()
    Promise.all([timePro, coachPro]).then(res => {
      this.setColumns()
      this.setTableData()
    })
}

三、async/await

async changeCoachList(){
   await this.getCoachList()
   this.setTableData()
}

相关文章

  • Promise顺序执行两个函数

    一般情况下,数据库操作和网络请求都是异步的;执行完getCoachList()后再执行setTableData()...

  • JavaScript 控制异步走向的几种方式

    使用 setTimeout 实现异步,通过函数执行顺序、回调函数、promise 对象、async 和 await...

  • Promise的实例用法

    设定函数 特殊场景下需要按照顺序执行,可以用的到Promise方法

  • 异步编程

    两个函数并行执行最简作法 两个函数并行执行后再去执行其他操作 Promise 在setTimeout 内部执行的是...

  • 普通函数、promise 、setTimeout执行顺序

    console.log(1)setTimeout(() => { console.log(2)}, 0);con...

  • ES6(Promise)

    Promise是异步编程的解决方案。举个例子,有一个函数A,A执行一些步骤,A执行完要执行函数B,这里有个顺序问题...

  • promise 并行 串行

    Promise.all并行执行promise 顺序执行promise 1.使用then链式操作 2.使用promi...

  • js原生实现promise

    Promise构造函数接受一个函数作为参数,函数里面有两个参数resolve和reject分别作为执行成功或者执行...

  • Promise 执行顺序

    使用 async 和 await

  • Promise执行顺序

    这段代码执行后,分别打印出来什么? 答案: 刚开始看这个问题的时候这个 then和4的顺序很让我迷惑。后来看了很多...

网友评论

    本文标题:Promise顺序执行两个函数

    本文链接:https://www.haomeiwen.com/subject/ulnmbftx.html