1. 程式人生 > >利用Promise實現資料多個請求載入完成時執行某個方法

利用Promise實現資料多個請求載入完成時執行某個方法

在實際開發中常常有些業務的資料是來自多個介面的,因為ajax是非同步,這樣就導致我們需要判斷是否請求到了資料然後在做其他的邏輯,在Promise沒有出現之前,通常我們的解決方法是,第一粗暴的改非同步為同步,但這樣會造成阻塞,非同步好像又失去了意義,第二也就是大家常用的解決辦法用回撥既一個非同步執行完成後在執行下一個請求,這樣看比第一種要好太多了,但是問題又來了,延遲延遲延遲,請求越多最後的那個請求延遲就會越嚴重,而且這樣請求多了之後邏輯就會變得很亂。。。痛苦不堪,還好es6帶來的Promise正好能解決這個東西,關於Promise具體詳情請百度,這裡大致只說三個東西,resolve, reject,Promise.all 對應成功執行,失敗執行,返回全部狀態,例項貼程式碼 很容易理解。

const promist = new Promise((resolve, reject) => {
              this.$http.jsonp(getRegionNameByIdApi, {params: {regionId: dqarr}}).then((res) => {
                this.dqarr = res.body.data
                resolve(res.body.data)
              }, (err) => {
                console.log(err)
              })
            })
            const promist1 = new Promise((resolve, reject) => {
              this.$http.jsonp(getPartnerNameByIdApi, {params: {partnerId: sharr}}).then((res) => {
                this.sharr = res.body.data
                resolve(res.body.data)
              }, (err) => {
                console.log(err)
              })
            })
            Promise.all([promist, promist1]).then((resultList) => {
              console.log('results:', resultList)
              resultList[0].map((item) => {
                this.tableData.map((val) => {
                  if (item.regionId === val.regionId) {
                    val.region_name = item.regionName
                  }
                  if (item.regionId === val.areaId) {
                    val.area_name = item.regionName
                  }
                  if (item.regionId === val.shopId) {
                    val.shopName = item.regionName
                  }
                  if (resultList[1][val.partnerId]) {
                    val.partner_name = resultList[1][val.partnerId]
                  }
                })
              })
              this.$set(this.tableData, this.tableData)
            })

建立promis和promist1並賦值一個Promise返回結果,在new一個新的Promise中 resolve代表成功要執行的方法,傳入非同步響應的資料,這個新的Promise最後將返回一個數組 最後Promise.all傳入兩個引數,注意Promise.all只能傳入一個數組,在陣列中放promis和promis1,在then中同樣返回一個數組,對應promis和promis1成功響應的資料