JavaScript中的异步编程-ES5 & ES6

来源:互联网 发布:vue.js 2.0 radio 编辑:程序博客网 时间:2024/06/05 04:54

在前后端分离的时候,后端生成的一些API接口的请求时间会不同,

example

// 请求a接口的时间为300msurl_a = 'url1'// 请求b接口的时间为400msurl_b = 'url1'// 请求c接口的时间为500msurl_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写法

这里写代码片
原创粉丝点击