asyncawait让异步编程更简单，全方位讲解，手把手教你能不会？

Posted 2022-03-02 程序员超时空

简单来说，async/await是基于promises的语法糖，使异步代码更易于编写和阅读。

一、async：

async创建一个异步函数来定义一个代码块，在其中运行异步代码;

怎样变成异步函数呢？以async这个关键字开始，它可以被放置在一个函数前面

async function f() 
  return 1;


f().then(alert); // 1

//上下结果一样

async function f() 
  return Promise.resolve(1);


f().then(alert); // 1

//也可以用箭头函数
let hello = async () =>  return "1" ;
hello().then((value) => console.log(value))
//返回值也可以简化成这样
hello().then(console.log)

异步函数的特征之一：保证函数的返回值为 promise。

将async关键字加到函数申明中，可以告诉它们返回的是 promise，而不是直接返回值。此外，它避免了同步函数为支持使用await带来的任何潜在开销。

二、await:

await只在异步函数里面才起作用。它可以放在任何异步的，关键字await让 javascript 引擎等待直到 promise 完成并返回结果。在等待promise的同时，其他正在等待执行的代码就有机会执行了。

您可以在调用任何返回Promise的函数时使用await，包括Web API函数。

async function f() 
  let promise = new Promise((resolve, reject) => 
    setTimeout(() => resolve("咚!"), 1000)
  );

  let result = await promise; // 等待执行，直到 promise resolve 执行完

  alert(result); // "咚!"


f();//拿到 result 作为结果继续往下执行。所以上面这段代码在1秒后显示 “咚!”。

注意：await实际上会暂停函数的执行，直到 promise 状态变为 完成，然后以 promise 的结果继续执行。这个行为不会耗费任何 CPU 资源，因为 JavaScript 引擎可以同时处理其他任务：执行其他脚本，处理事件等。

三、综合应用：

有了async/await就去除了到处都是.then()代码块，因为await会等待了。

async function A() 
  let response = await fetch('c.jpg');
  let myBlob = await response.blob();

  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);


A()
.catch(e => 
  console.log('问题: ' + e.message);
);

用更少的.then()块来封装代码，同时它看起来很像同步代码，所以它非常直观。这样用的很爽！

想了解更多常用异步？点击下列蓝色字体学习哦！

1.Promise如何使用？全方位解析，一篇搞懂异步

2.让你五分钟搞懂，错误处理try…catch…finally的文章，涵盖throw，TypeError，RangeError，SyntaxError解释

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 前端开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 点击我的GitHub免费获取。
还有免费的 高级web全套视频教程 前端架构 H5 vue node 小程序 视频+资料+代码+面试题！

全方面的web前端进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。