异步专题

朴灿烈づ我的快乐病毒、 2022-06-06 12:40 200阅读 0赞

*更新时间：2017年11月09日10:00:44*

[《我的博客地图》][Link 1]

研发工程师需要学习的技术和技能很多，新技术需要不断学习跟进时代发展，但老的技术也需要深入体会和消化，知识的海洋是浩瀚的，学习的步伐不能松懈。

1、同步

每一条js语句逐条执行

2、异步

同步语句遇到异步语句，会开启新的异步线程，异步语句进入异步队列排队等候；

3、异步方法同步执行

getData()\{

ajax(\{data:\{\},success:(data)=>\{this.state.answer = data\}\});

\}

上面的方法用于获取数据，如果采用下面的执行步骤，第二条语句是取不到answer的值，因为ajax是异步的；

getData();

console.log(this.state.answer);

解决方案一：回调函数；首先改写getData方法如下，然后在调用的时候将回调函数以形参的形式传递进去；

getData(callback)\{

ajax(\{data:\{\},success:(data)=>\{

this.state.answer = data;

callback()\}\});

\}

callback()\{

console.log(this.state.answer);

\}

getData(callback);

解决方案二：async函数

异步方法获取数据如下，

getData()\{

ajax(\{data:\{\},success:(data)=>\{this.state.answer = data\}\});

\}

进行改写如下

async getData()\{

await ajax(\{data:\{\},success:(data)=>\{this.state.answer = data\}\});

\}

异步方法同步执行方案如下：

getData();

console.log(this.state.answer);

4、更新redux数据后的异步操作

如下案例：

setData();//更新redux数据的action函数，向存储滚动列表数据的store中追加一条数据

this.\_flatlist.scrollToEnd();//触发react-native的FlatList组件滚动到底部

上面的滚动函数执行失效，由于acton函数执行之后，当redux数据发生变化，会触发组价生命周期的render方法，可以比拟成下面的情况：

setData();

this.setState(\{\});

this.\_flatlist.scrollToEnd();

滚动函数上面是一个异步方法，此时FlatList组件还没有检测到高度发生变化，因此误认为以为是在底部；

改进方案，如下，将滚动函数同步语句异步执行，此时，render和scroll都进入了异步队列中，按照顺序执行；

setData();

setTimeout(()=>\{  
this.\_flatlist.scrollToEnd();  
\},0)

5、Promise对象-异步方法创建回调后同步执行

场景，在异步方法后面执行同步语句，是无法取到异步方法执行后的数据；如果异步方法有回调函数，这没什么说的，但是如果异步方法没有回调函数，需要人为创建异步方法的回调函数，即Promise对象；

案例一：在异步的ajax请求成功后执行的操作：

getDate = params => \{

return new Promise((resolve,reject)=>\{

$.ajax(\{\},success:()=>\{resolve(true)\});

\})

\}

getData(params).then(()=>\{

//ajax请求成功后执行的操作

\});

案例二：

onChange(e)\{  
this.layout(this.refs.textInput).then((item)=>\{  
console.log(item);//可以在then回调中同步获取数据\{ x,y,width,height,pageX,pageY\}

\})  
\}  
layout(ref) \{

const handle = findNodeHandle(ref);

return new Promise((resolve) => \{  
UIManager.measure(handle, (x, y, width, height, pageX, pageY) => \{  
resolve(\{x,y,width,height,pageX,pageY\});  
\});  
\});  
\}

未完，待续...

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440

发表评论取消回复

表情：

评论列表（有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关【commons-beanutils专题】005- ConvertUtils 专题

【commons-beanutils专题】005- ConvertUtils 专题文章目录【commons-beanutils专题】005- Conver

短命女/ 2023年09月28日 16:02/ 0 赞/ 154 阅读

相关【commons-beanutils专题】004- BeanUtils 专题

【commons-beanutils专题】004- BeanUtils 专题文章目录【commons-beanutils专题】004- BeanUtils

古城微笑少年丶/ 2023年09月28日 16:02/ 0 赞/ 48 阅读

相关【commons-beanutils专题】003- PropertyUtils 专题

【commons-beanutils专题】003- PropertyUtils 专题文章目录【commons-beanutils专题】003- Prope

旧城等待，/ 2023年09月28日 15:13/ 0 赞/ 38 阅读

相关【commons-beanutils专题】002- ConstructorUtils 专题

【commons-beanutils专题】002- ConstructorUtils 专题文章目录【commons-beanutils专题】002- Co

旧城等待，/ 2023年09月28日 14:58/ 0 赞/ 46 阅读

相关【commons-beanutils专题】001- MethodUtils 专题

【commons-beanutils专题】001- MethodUtils 专题文章目录【commons-beanutils专题】001- MethodU

待我称王封你为后i/ 2023年09月28日 14:48/ 0 赞/ 43 阅读

相关 Block 专题

CocoaChina > Objective-C中的Block - 内存的角度分析 > [http://www.cocoachina.com/ios/20150109/1

冷不防/ 2022年08月05日 07:48/ 0 赞/ 223 阅读

相关异步专题

更新时间：2017年11月09日10:00:44 [《我的博客地图》][Link 1] 研发工程师需要学习的技术和技能很多，新技术需要不断学习跟进时代发展，但

朴灿烈づ我的快乐病毒、/ 2022年06月06日 12:40/ 0 赞/ 201 阅读

相关 [面试专题]JS异步之Promise,Generator,Async

JS异步之Promise,Generator,Async -------------------- Promise 1. 解决的问题:回调地狱 2. Prom

Bertha 。/ 2022年02月24日 04:14/ 0 赞/ 337 阅读

相关性能专题

if与switch 当多个条件语句判断时，switch比多个if语句的性能高。转载于:https://www.cnblogs.com/lanchong/archive/2

- 日理万妓/ 2021年12月16日 02:55/ 0 赞/ 264 阅读

相关搜索专题

> 搜索 > > 深度优先搜索 > 最优解的问题 > 树的遍历 > 图的

迷南。/ 2021年09月21日 03:02/ 0 赞/ 371 阅读