项目中使用H5做混合编程,但是还是android的那套逻辑,需要使用很多回调和异步线程间,涉及到异步和同步的处理。实际开发中使用了大量的回调,使代码可读性变差,扩展性降低。比如,界面启动时,需要在网络获取数据,存在临时缓存中,多个异步线程中使用这个数据。
这里重新学习一下H5的异步编程,优化代码逻辑
H5异步编程的方法,这篇文章说的挺详细的
我使用的是 async/awai +promis来解决 异步转同步问题,关于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