什么是异步编程
什么是异步编程,异步编程简单来说就是:执行一个指令不会马上返回结果而执行下一个任务,而是等到特定的事件触发后,才能得到结果。
异步编程时就需要指定异步任务完成后需要执行的指令,总的来说有以下几种“指定异步指令”的方式:
- 属性
- 回调
- Promise
- Generator
- await,async
属性
早期的javascript的异步的实现也类似于这种类的属性的方式:每个类实例的相关回调事件有相应的handler(onclick,onchange,onload) 等。
在DOM0级事件处理程序,就是将一个函数赋值给一个元素的属性。
element.onclick=function(){
console.log("clicked");
}
window.onload=function(){
console.log("loaded");
}
回调(发布/订阅)
由于javascript支持函数式编程,JavaSCript语言对异步编程的实现可以用回调函数。 DOM2级事件解决了这个问题以上两个问题
element.addEventListener("click",function(){
console.log("clicked");
});
Promise
Promise很好的解决了"并行"的问题,我们看看用promise库怎么发送get请求:
import fetch from 'node-fetch';
fetch('https://api.github.com')
.then((res)=>res.json())
.then((json)=>console.log("json:",json))
可以看到promise把原来嵌套的回调,改为级连的方式了,实际是一种代理(proxy)。
新建一个promise实例:
let promise = new Promise((resolve, reject)=>{
// 异步操作的代码
if(/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
promise把成功和失败分别代理到resolved 和 rejected . 同时还可以级连catch异常。
Generator
简单来说generator可以理解为一个可遍历的状态机。
语法上generator,有两个特征:
- function关键字与函数名之前有一个星号。
- 函数体内部使用 yield关键字,定义不同的内部状态。
由于generator是一个状态机,所以需要手动调用 next才能执行,但TJ大神开发了co模块,可以自动执行generator。
import co from 'co';
co(function* (){
let now = Date.now();
yield sleep(150); // 约等待150ms
console.log(Date.now() - now);
});
function sleep(ms){
return function(cb){
setTimeout(cb, ms);
};
}
import fetch from 'node-fetch';
co(function* (){
let result = yield [
(yield fetch('https://api.github.com/users/1')).json(),
(yield fetch('https://api.github.com/users/2')).json(),
];
console.log("result:",result);
});
无论是延迟执行,还是并发的从两个接口获取数据,generator都可以用同步的方式编写异步代码。
await,async(ECMAScript7)
ES7 引入了像C#语言中的 await,async关键字,而且babel已支持(引入plugins:transform-async-to-generator )
async函数完全可以看作多个异步操作,包装成的一个Promise对象,而await命令就是内部then命令的语法糖。
import fetch from 'node-fetch';
(async function (){
let result= await fetch('https://api.github.com/users/etoah');
let json =await result.json();
console.log("result:",json);
})();
//exception
(async function (){
try{
let result= await fetch('https://api.3github.com/users/etoah');
let json =await result.json();
console.log("result:",json);
}
catch(ex){
console.warn("warn:",ex);
}
})()
简单比较会发现,async函数就是将Generator函数的星号(*)替换成async,将yield替换成await,同时不需要co模块,更加语义化。
但是与yeild又不完全相同,标准没有接收await*的语法( :( 查看详情),
若需“并行”执行promise数组,推荐用Promise.All,所以需要并行请求时,需要这样写:
(async function (){
let result= await Promise.all([
(await fetch('https://api.github.com/users/tj')).json(),
(await fetch('https://api.github.com/users/etoah')).json()
]);
console.log("result:",result);
})();
总结
到这里,jser结合promise,yield,await的写法,可以和回调嵌套说拜拜了。