备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

掌握 Async/Await

2019-05-08 1198
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 还不用Async/Await就OUT了。。

摘要： 还不用Async/Await就OUT了。。

Fundebug经授权转载，版权归原作者所有。

前端工程师肯定都经历过 JS 回调链狱的痛苦过程，我们在使用 Promise 的时候总是不尽人意。这时候 Async/Await 应运而生，它到底有什么魔力，我们来说道说道。

一、回顾 Promise

所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

1. 语法

new Promise(executor);
new Promise(function(resolve, reject) { ... });

2. 参数

带有 resolve 、reject 两个参数的一个函数。这个函数在创建 Promise 对象的时候会立即得到执行（在 Promise 构造函数返回 Promise 对象之前就会被执行），并把成功回调函数（resolve）和失败回调函数（reject）作为参数传递进来。调用成功回调函数（resolve）和失败回调函数（reject）会分别触发 Promise 的成功或失败。

这个函数通常被用来执行一些异步操作，操作完成以后可以选择调用成功回调函数（resolve）来触发 Promise 的成功状态，或者，在出现错误的时候调用失败回调函数（reject）来触发 Promise 的失败。

3. Promise.all

用 Promise.all 来执行，all 接收一个数组参数，里面的值最终都算返回 Promise 对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到 then 里面。

Promise.all([async1(), async2(), async3()])
.then(function(results){
  console.log(results);
});

all 会把所有异步操作的结果放进一个数组中传给 then，就是上面的 results。

4. Promise.race

all 方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是 race方法：

Promise.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

上述代码演示了 race 的基本用法，实现的功能是：请求图片，如果请求成功就返回图片，否则就调用超时函数。

更多资源，请查看：

二、Promise 为何不完美？

乍一看，Promise 还不错，帮我们解决了回调链狱的问题。当然这只是简单使用，碰到复杂的业务也有很鸡肋的场景，比如：

1. 错误处理

在下面的 Promise 示例中，Try/Catch 不能处理 JSON.parse 的错误，因为它在 Promise中。我们需要使用 catch，这样错误处理代码非常冗余。并且，在我们的实际生产代码会更加复杂。

const makeRequest = () => {
  try {
    getJSON().then(result => {
      // JSON.parse可能会出错
      const data = JSON.parse(result)
      console.log(data)
    })
    // 取消注释，处理异步代码的错误
    // .catch((err) => {
    //   console.log(err)
    // })
  } catch (err) {
    console.log(err)
  }
}

Async/Await 让 Try/Catch 可以同时处理同步和异步错误。使用 Async/Await 的话，Catch能处理 JSON.parse 错误:

const makeRequest = async () => {
  try {
    // this parse may fail
    const data = JSON.parse(await getJSON())
    console.log(data)
  } catch (err) {
    console.log(err)
  }
}

Async/Await 最让人舒服的一点是代码看起来是同步的。

2. 条件语句

下面示例中，需要获取数据，然后根据返回数据决定是直接返回，还是继续获取更多的数据。

const makeRequest = () => {
  return getJSON()
    .then(data => {
      if (data.needsAnotherRequest) {
        return makeAnotherRequest(data)
          .then(moreData => {
            console.log(moreData)
            return moreData
          })
      } else {
        console.log(data)
        return data
      }
    })
}

这些代码看着就头痛。嵌套（6层），括号，return 语句很容易让人感到迷茫，而它们只是需要将最终结果传递到最外层的Promise。如果换成 Async/Await 呢：

const makeRequest = async () => {
  const data = await getJSON();
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    console.log(moreData);
    return moreData;
  } else {
    console.log(data);
    return data;  
  }
}

所以，这才是真正摆脱回调链狱的正确做法。

3. 中间值

你很可能遇到过这样的场景，调用 promise1，使用 promise1 返回的结果去调用 promise2，然后使用两者的结果去调用promise3。你的代码很可能是这样的：

const makeRequest = () => {
  return promise1()
    .then(value1 => {
      return promise2(value1);
        .then(value2 => {        
          return promise3(value1, value2);
        })
    })
}
// 或者：
const makeRequest = () => {
  return promise1()
    .then(value1 => {
      return Promise.all([value1, promise2(value1)])
    })
    .then(([value1, value2]) => {      
      return promise3(value1, value2)
    })
}

怎么写都会觉得很复杂，那如果 Async/Await 用来实现呢，表现可能如下：

const makeRequest = async () => {
  const value1 = await promise1();
  const value2 = await promise2(value1);
  return promise3(value1, value2);
}

是不是很 6 ，将复杂的场景简化，这样的代码就很有灵性了。

4. 错误栈

调用了多个 Promise，假设 Promise 链中某个地方抛出了一个错误，Promise 链中返回的错误栈没有给出错误发生位置的线索。更糟糕的是，它会误导我们；错误栈中唯一的函数名为 callAPromise，然而它和错误没有关系。(文件名和行号还是有用的)。

const makeRequest = () => {
  return callAPromise()
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => {
      throw new Error("oops");
    })
}

makeRequest().catch(err => {
  console.log(err);
  // output
  // Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)
})

然而，Async/Await 中的错误栈会指向错误所在的函数：

const makeRequest = async () => {
  await callAPromise();
  await callAPromise();
  await callAPromise();
  throw new Error("oops");
}

makeRequest().catch(err => {
  console.log(err);
  // output
  // Error: oops at makeRequest (index.js:7:9)
})

5. 调试

调试 Promise 有两个问题：

  • 不能在返回表达式的箭头函数中设置断点；
  • 如果你在 then 代码块中设置断点，调试器不会跳到下一个 then，因为它只会跳过异步代码;

而使用 Await/Async 时，你不再需要那么多箭头函数，这样你就可以像调试同步代码一样跳过 Await 语句。

这里只简单的列出问题，详细请查看原文：Async/Await 替代 Promise 的 6 个理由

三、新时代的曙光 Async/Await

简单介绍：

  • Await/Async 是写异步代码的新方式，以前的方法有回调函数和 Promise。
  • Await/Async 是基于 Promise 实现的，它不能用于普通的回调函数。
  • Await/Async 与 Promise 一样，是非阻塞的。
  • Await/Async 使得异步代码看起来像同步代码，这正是它的魔力所在。

使用 Promise 是这样的:

const jarttoDemo = () =>
getJSON().then(data => {
  return data;
})

jarttoDemo();

使用 Async/Await 是这样的:

const jarttoDemo = async () => {
  let data = await getJSON();
  return data;
}

jarttoDemo();

基本规则：

  • Async 表示这是一个 Async 函数，Await 只能用在这个函数里面。
  • Await 表示在这里等待 Promise返回结果了，再继续执行。
  • Await 后面跟着的应该是一个 Promise 对象，当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了。

四、更多用法示例

1. 简单示例

var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
        resolve();
    }, time);
  })
};

var start = async function () {
    // 在这里使用起来就像同步代码那样直观
    console.log('start');
    await sleep(3000);
    console.log('end');
};

start();

2. 获得返回值

var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
        // 返回 ‘ok’
        resolve('ok');
    }, time);
  })
};

var start = async function () {
    let result = await sleep(3000);
    console.log(result); // 收到 ‘ok’
};

3. 错误捕获

const makeRequest = async () => {
  try {
    // this parse may fail
    const data = JSON.parse(await getJSON())
    console.log(data)
  } catch (err) {
    console.log(err)
  }
}

既然 then 不用写了，那么 catch 也不用写，可以直接用标准的 try catch 语法捕捉错误。

var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      // 模拟出错了，返回 ‘error’
      reject('error');
    }, time);
  })
};

var start = async function () {
  try {
    console.log('start');
    await sleep(3000); // 这里得到了一个返回错误
    
    // 所以以下代码不会被执行了
    console.log('end');
  } catch (err) {
    console.log(err); // 这里捕捉到错误 `error`
  }
};

4. 条件语句

Promise 写法：

const makeRequest = () => {
  return getJSON()
    .then(data => {
      if (data.needsAnotherRequest) {
        return makeAnotherRequest(data)
          .then(moreData => {
            return moreData;
          })
      } else {
        return data;
      }
    })
}

Async/Await 写法：

const makeRequest = async () => {
  const data = await getJSON();
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    return moreData;
  } else {
    return data;  
  }
}

5. 循环多个 Await 

var start = async function () {
  for (let i = 1; i <= 10; i++) {
    console.log(`当前是第 ${i} 次等待..`);
    await sleep(1000);
  }
};

需要注意的是，Await 必须在 Async 函数的上下文中的。

6. 在 forEach 中使用

async function printFiles() {
    const files = await getFilePaths();

    for (let file of files) {
        const contents = await fs.readFile(file, "utf8");
        console.log(contents);
    }
}

async function printFiles() {
    const files = await getFilePaths();

    await Promise.all(
        files.map(file => {
            return async () => {
                const contents = await fs.readFile(file, "utf8");
                console.log(contents);
            };
        })
    );
}

示例参考如下文章：

五、总结

我们一直在强调代码的可读性和可维护性，对我来说，Async/Await 更加易懂和易用。所以，不管是 Promise 还是 Async/Await ，能解决实际问题的技术就是好技术。

当然，Async/Await 也是基于 Promise 概念的，技术上我们也可以求同存异，不必太过较真。一句话，选择权在你！

文章标签：
前端开发
JavaScript
fundebug
目录
相关文章
一个大长腿.
|
2月前
|
前端开发 JavaScript
什么是 async、await ？
什么是 async、await ？
一个大长腿.
19 0
子玉欸
|
5月前
|
JSON 前端开发 JavaScript
async/await的应用
async/await的应用
子玉欸
30 0
进军全栈攻城狮
|
7月前
|
前端开发 JavaScript
Async/await
Async/await
进军全栈攻城狮
31 0
Y2000104
|
16天前
|
前端开发 JavaScript
async/await
async/await
Y2000104
16 0
1997004053898270
|
2天前
|
前端开发
await
await
1997004053898270
11 4
梦中千秋
|
1天前
|
前端开发 JavaScript
Promise、async和await
Promise、async和await
梦中千秋
8 0
雷霆半月斩掉你的板砖
|
13天前
|
JSON 前端开发 JavaScript
async 与 awite
async 与 awite
雷霆半月斩掉你的板砖
14 0
超级无敌宇宙霹雳第一帅
|
3月前
|
前端开发 JavaScript
说说async和await
说说async和await
超级无敌宇宙霹雳第一帅
14 0

热门文章

最新文章

  • 1
    Mac安装并使用telnet命令操作
  • 2
    OSS回源的几种方式和应用场景
  • 3
    [剑指offer] 孩子们的游戏(圆圈中最后剩下的数)
  • 4
    网络安全系列之二十二 Windows用户账号加固
  • 5
    我理解的一个程序员如何学习前端开发
  • 6
    《社交网站界面设计（原书第2版）》——1.9　为设备之间的空间进行设计
  • 7
    《Microduino实战》——1.2　为什么要开源
  • 8
    .Net函数Math.Round你会用吗？
  • 9
    麻省理工大学新发明：暗黑WiFi透视技术
  • 10
    2014秋C++第19周 补充代码 哈希法的存储与查找
  • 1
    R语言关联规则模型(Apriori算法)挖掘杂货店的交易数据与交互可视化
    25
  • 2
    R语言近似贝叶斯计算MCMC（ABC-MCMC）轨迹图和边缘图可视化
    21
  • 3
    r语言中对LASSO回归，Ridge岭回归和弹性网络Elastic Net模型实现-4
    31
  • 4
    Sentieon | 每周文献-Multi-omics-第四十一期
    26
  • 5
    数据分享|R语言广义线性模型GLM：线性最小二乘、对数变换、泊松、二项式逻辑回归分析冰淇淋销售时间序列数据和模拟-2
    17
  • 6
    数据分享|R语言广义线性模型GLM：线性最小二乘、对数变换、泊松、二项式逻辑回归分析冰淇淋销售时间序列数据和模拟-1
    23
  • 7
    基于RT-Thread摄像头车牌图像采集系统
    22
  • 8
    R语言极值理论：希尔HILL统计量尾部指数参数估计可视化
    17
  • 9
    【视频】R语言中的分布滞后非线性模型（DLNM）与发病率，死亡率和空气污染示例
    23
  • 10
    sql语句创建数据库
    19

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）