JavaScript中的異步編程-ES5 & ES6

在前後端分離的時候，後端生成的一些API接口的請求時間會不同，

example

// 請求a接口的時間爲300ms

url_a = 'url1'

// 請求b接口的時間爲400ms

url_b = 'url1'

// 請求c接口的時間爲500ms

url_c = 'url1'

1.當a,b,c接口互相不依賴的時候，如何請求到最後一個接口的時候渲染dom

ES5垃圾寫法

寫法1

let url_a = '300ms',
  url_b = '400ms',
  url_c = '500ms'

get(url_a, function(res1) {
  if (res1) {
    get(url_b, function(res2) {
      if (res2) {
        get(url_c, function(res3) {
          // 到這裏纔會得到三次返回的數據
          // 總共用時1200ms
        })
      }
    })
  }
})

寫法2

let url_a = '300ms',
  url_b = '400ms',
  url_c = '500ms'

var getA = function(callback) {
    get(url_a, function(res) {
        if (res) callback(res)
    })
}

var getB = function(callback) {
    get(url_b, function(res) {
        if (res) callback(res)
    })
}

var getC = function(callback) {
    get(url_c, function(res) {
        if (res) callback(res)
    })
}

getA(function(res1) {
    getB(function(res2) {
        getC(function(res3) {
            if (res1 && res2 && res3) {
                // 渲染數據
                // 同時發出三個請求  等到三個請求都返回數據的時候渲染數據
            }
        })
    })
})

ES6 promise寫法

這裏寫代碼片