美文网首页前端面试基础必备
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顺序执行两个函数

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