JavaScript中的异步编程

JavaScript中的异步编程

JavaScript中的异步编程在前端开发的过程中经常出现回调函数，事件监听，promise，generator，async/await这几种方式都是异步编程
首先我们需要了解一下同步编程和异步编程有哪些区别，那么同步编程又是什么呢？
同步编程就是在执行某段代码时在该代码没有得到返回结果之前，其他代码暂时无法执行，但是一旦执行完成拿到返回值之后就可以执行其他代码了。
异步编程就是当某段代码执行异步过程调用发出后这段代码不会立刻得到返回结果。而是在异步调用发出之后，一般通过回调函数处理这个调用之后拿到结果
下面时无限回调的一个样例代码

fs.readFile(A, 'utf-8', function(err, data) {
fs.readFile(B, 'utf-8', function(err, data){
fs.readFile(C, 'utf-8', function(err, data){
fs.readFile(D, 'utf-8', function(err, data){/....
});
});
});
});

类似于这样的请求还有很多：1. Ajax请求的回调   2.定时器的回调  3.事件回调  4.nodejs中的一些方法回调。
异步回调如果层级很少，可读性和代码的维护性还是可以接受，一旦层级多就会陷入回调地狱
在回调地狱这个问题上官方在ES6中给出了promise这个方法在一定程度上解决了这个问题，下面我们用一段代码来理解一下是如何解决的

	function read(url) {
return new Promise((resolve, reject) =>{
fs.readFile(url, 'utf8', (err, data) =>{
if(err) reject(err);
resolve(data);
});
});
}
read(A).then(data =>{return read(B);
}).then(data =>{return read(C);
}).then(data =>{return read(D);
}).catch(reason =>{console.log(reason);
});

这种方法在层级数过多的时候依然会出现问题，promise方法并没有在根本上解决回调地狱的问题
但是我们还可以使用promise中的内置方法promise.all方法，这样的话会比之前的代码更加的清晰明了，代码如下：

function read(url){
return new Promise((resolve, reject) =>{fs.readFile(url, 'utf8', (err, data) =>{if(err) reject(err);
resolve(data);});
});}
/通过 Promise.all可以实现多个异步并行执行，同一时刻获取最终结果的问题
Promise.all([read(A), read(B), read(C)]).then(data =>{
console.log(data);
).catch(err =>
console.log(err));

Generator方法
Generator最大的特点就是可以交出函数的执行权，Generator函数可以看出是异步任务的容器需要暂停的地方都用yield语法来标注，最后返回的将是迭代器
下面是该方法的代码实现

function*gen(){let a = yield 111;
console.log(a);let b = yield 222;
console.log(b);let c= yield 333;
console.log(c);let d = yield 444;
console.log(d);}
let t= gen();
t.next(1);//第一次调用next函数时，传递的参数无效,故无打印结果
t.next(2);// a输出2;
t.next(3);// b输出3;
t.next(4);// c输出4;
t.next(5);// d输出5;

最后讲解一下async和await
async是Generator函数的语法糖
asayc/await的优点是代码清晰，可以处理回调地狱问题

function testWait(){
return new Promise((resolve,reject)={setTimeout(function(){
console.log("testWait");resolve();
}, 1000);)
}
async function testAwaitUse(){await testWait()
console.log("hello");
return 123;
//输出顺序: testWait,hello第十行如果不使用await输出顺序:hello , testWait}
console.log(testAwaitUse());

总结

上述文章如果有问题或者想问问题或者想交流技术或者想和作者闲聊可以+QQ：2029788643