JS-Promise（使异步操作同步执行）

Posted 2020-11-10 zjffun

Promise - JavaScript | MDN
Promise - 廖雪峰的官方网站

使用Promise使异步操作同步执行非常方便，我在遇到了使不确定个数个异步操作同步执行时学习了很久这个Promise的使用（当时因为没有理解透彻也纠结了好久），并进行总结，希望可以帮到大家

单个异步操作同步

<div id="box"></div>
<script>
  var box = document.querySelector(‘#box‘)
  var p = new Promise(function(resolve, reject){
    setTimeout(function(){
      box.innerhtml += ‘网络请求<br>‘;
      resolve()
    }, 1000)
  })
  p.then(function(resolve){
    box.innerHTML += ‘结束<br><hr>‘;
  })
</script>

确定个数异步操作同步

<div id="box"></div>
<script>
  var p = new Promise(function(resolve, reject){
    setTimeout(function(){
      box.innerHTML += ‘建立连接<br>‘;
      resolve(‘ok‘)
    }, 1000)
  })
  function post_sth(data){
    return new Promise(function(resolve, reject){
      setTimeout(function(){
        box.innerHTML += ‘post网络请求,此时data=‘+data+‘ <br>‘;
        resolve(data+‘|post‘)
      }, 1000)
    })
  }
  function get_sth(data){
    return new Promise(function(resolve, reject){
      setTimeout(function(){
        box.innerHTML += ‘get网络请求,此时data=‘+data+‘ <br>‘;
        resolve(data+‘|get‘)
      }, 1000)
    })
  }
  
  p.then(post_sth).then(get_sth).then(post_sth).then(function(data){
    box.innerHTML += ‘最后data=‘+data+‘<br><hr>‘;
  });
</script>

不定个数异步操作同步

<div id="box"></div>
<script>
  var p = new Promise(function(resolve, reject){resolve()})
  /**
    function
      返回function（供本then用）
        返回Promise（供下一个then用）
  */
  function get_request_sth_func(i){
    return function request_sth(){
      return new Promise(function(resolve, reject){
        setTimeout(function(){
          box.innerHTML += ‘请求‘+i+‘<br>‘;
          resolve()
        }, Math.round(Math.random()*1000))
      })
    }
  }
  for (var i = 0; i < 20; ++i) {
    p = p.then(get_request_sth_func(i))
  }
  p.then(function(){
    box.innerHTML += ‘完成<br><hr>‘;
  })
</script>