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

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(html5)