利用async和await提升代码颜值

最近比较忙,本来想发一篇关于react-native的,但是没整理好......今天一共发两个文章,一个技术类的,另一个是闲谈的.
代码是程序员的脸面,你写的代码好不好看关乎到你职业的颜值高度...所以代码颜值还是比较重要的,但是不可避免的是在现在繁重的业务逻辑下总会出现以下的代码(复杂的接口请求处理逻辑):

// 伪代码
fetch_first(obj,()=>{
// success callback
 if (吧啦吧啦){
   fetch_second(obj,()=>{
      // success callback
      ...
   })
 }
},()=>{
// fail callback

})

wtf!!!我见过最多的处理逻辑一共300行的代码,无限制的请求回调=>请求回调=>请求回调,到最后的代码缩进已经到半个屏幕那么多了...其实这个就叫做回调地狱,从根本上来讲我们是要拒绝这种逻辑的,但是有时候由于产品逻辑就是那么麻烦,你就是要去做很多的判断然后根据判断在继续请求(容我先杀一个产品祭天),这时候我们不妨考虑用一下async和await去增加下代码的颜值那么以上的代码就可以修改为如下形式:

// 伪代码
async function() {
  const res = await fetch_first(obj)
  if(res.isFetch){ // 实际情况的判断逻辑
    await fetch_second(obj)
    ...
  }
}

这里需要注意几点:第一如果你函数式es6的箭头函数 那么你的async关键字就要放在箭头函数()的前边

fnc = async (param)=>{
  await fetch()
  ...
}

第二其实async 和 await很好理解,就是await后边的代码会等待await执行完毕后在执行,相当于我们的callback函数,那么当需要对请求的错误信息进行处理的时候可以用try catch模块

async function() {
  try {
    await fetch()
    ...
  }catch(err){
    if(err.code === 1){
      ...
    }
  }
}

关于async和await的理解其实网上有很多博文了,如果看了我这个粗浅的介绍之后有兴趣想在项目中试一下的话可以先阅读下promise对象,然后在去看async和await的使用详解,promise首推阮一峰的博客...