异步专题

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

《我的博客地图》

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

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});
});
});
}

未完，待续...