H5异步编程学习笔记

     项目中使用H5做混合编程，但是还是android的那套逻辑，需要使用很多回调和异步线程间，涉及到异步和同步的处理。实际开发中使用了大量的回调，使代码可读性变差，扩展性降低。比如，界面启动时，需要在网络获取数据，存在临时缓存中，多个异步线程中使用这个数据。

这里重新学习一下H5的异步编程，优化代码逻辑

H5异步编程的方法，这篇文章说的挺详细的

javascript 异步编程的5种方式

我使用的是 async/awai  +promis来解决 异步转同步问题，关于promise，这篇文章讲的比较清楚

JS异步编程（promise、deferred对象）

理解promise，实现异步的同步编写

 

中文文档

Promise

使用 Promise

 

demo1

function testPromise() {
  console.log(">>>>>11111");
  testResult();
  console.log(">>>>>22222");
}

function getPromise(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(">>>>>55555");
      resolve(2 * num)
      console.log(">>>>>666666");
    }, 200);
  } )
}

async function testResult() {
  console.log(">>>>>33333");
  let result = await getPromise(1);
  console.log(">>>>>44444>>result:"+result);

}

打印結果 

1->3->2->5->6->4

testPromise 方法中 testResult 是异步执行，不阻断主线程

testResult 方法中 getPromise 方法有await标识，是同步方法，阻断主线程，要等待  resolve 方法返回结果，才回继续执行。

getPromise 方法虽然返回的是 new Promise ，但是实际上是返回 resolve 中的值。

 

demo2

function testPromise() {
  console.log(">>>>>11111");
  var a = testResult();
  a.then(function (res) {
    console.log(">>>>>77777+res：" + res);
  })
  console.log(">>>>>22222");
}

function getPromise(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(">>>>>55555");
      resolve(2 * num)
      console.log(">>>>>666666");
    }, 200);
  } )
}

async function testResult() {
  console.log(">>>>>33333");
  let result = await getPromise(1);
  console.log(">>>>>44444>>result:"+result);
  return result
}

打印结果:

demo2 中，将 testResult 方法放回的值改为了Promise 对象，在testPromise 获取后执行了.then方法，这样也能或者到放回的值

①打印的先打印2，最后打印7，testPromise 方法中 testResult 是异步执行，不阻断主线程

 

详细的测试也可以参考这个文章 

https://blog.csdn.net/qq_32899575/article/details/83107587