JavaScript中的异步编程-ES5 & ES6

最新推荐文章于 2022-03-24 23:51:10 发布

原创最新推荐文章于 2022-03-24 23:51:10 发布 · 993 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JS 专栏收录该内容

34 篇文章

订阅专栏

本文探讨了前后端分离架构下多个API接口并发请求的实现方法。针对互不依赖的接口，介绍了使用ES5和ES6 Promise的方式进行并发请求，并等待所有数据返回后再更新DOM，以提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前后端分离的时候，后端生成的一些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写法

这里写代码片