用优雅的方式编写异步代码-Eric
前言
随着互联网的发展,js的应用越来越广泛,地位也越来越重要,网站也发生了翻天覆地的变化。
到目前为止,前后台基本彻底分离,交互都采用异步的方式,ajax、fetch...
fetch
目前大部分互联网公司开发都转向React、Vue,前后台交互也大都使用fetch取代ajax,而我们知道fetch的实现原理采用了es6中的Promise,Promise把异步请求变得简单优雅,代码示例:
fetch(url, {})
.then(response=>{})
.then(res=>{})
.catch(err=>{});
我们要处理返回结果一般这么写:
fetch(url, {})
.then(response=>{ return response.json() })
.then(res=>{
// 结果处理
if(res.success){
// somecode...
}
})
.catch(err=>{});
如果处理逻辑比较多,这么写不直观,能不能这么写呢:
let res = fetch(url, {});
// 结果处理
if(res.success){
// somecode...
}
结果当然是可以的,那就是es7中的await
await & async
await 是es7中定义的一个关键字,可以等待Promise返回数据,相当于暂停功能,await字面意思就是等待。
async也是es7中的关键字,字面意思是异步,作用就是声明一个异步方法。
注意:
1、await不能单独存在,必须和async(异步)关键字一起使用。
2、await 后面如果不是一个Promise对象的话,那么不会等待哦!
代码走一波:
// async写在方法前面
asyncFunc = async ()=>{
console.time();
let res = await (new Promise((resolve, reject)=>{
setTimeout(resolve.bind(this, 10), 2000);
}));
console.timeEnd(); // default: 2711.656982421875ms 等待Promise执行完毕
console.log( res ); // 10 拿到了Promise的返回结果
}
asyncFunc();
await 对普通异步代码无效:
asyncFunc2 = async ()=>{
console.time();
let res = await setTimeout( ()=>{return 10}, 2000);
console.timeEnd(); // default: 0.705078125ms, 说明没有等待setTimeout完成
console.log( res ); // 737 setTimeout定时器的返回值
}
asyncFunc2();
更多操作自己去实践吧!
扩展
有兴趣的小伙伴可以去研究下 yield 关键字哦, 可以暂停方法的执行,并返回yield 后面的值
喜欢我的文章就点赞转发吧!