国外做设计的网站有哪些,网站开发实用技术2.8.5,wordpress淘宝客模版,爱企网前言
前端同学们可能都知道 async 和 await 的使用#xff0c;当被面试官问到 async 和 await 的是什么#xff1f;或者说一说你对 async、await 的理解#xff1f;如果我们还是仅仅去阐述我是如何使用的就显得格外的苍白无力。今天博主就来带大家进一步认识我们的 async 和…前言
前端同学们可能都知道 async 和 await 的使用当被面试官问到 async 和 await 的是什么或者说一说你对 async、await 的理解如果我们还是仅仅去阐述我是如何使用的就显得格外的苍白无力。今天博主就来带大家进一步认识我们的 async 和 await。首先来说由于浏览器/引擎负责解释和执行JavaScript的主线程是单线程同步执行一个耗时较大的任务会导致阻塞。异步执行代码就是来解决阻塞问题但会带来顺序的不确定性多个异步执行过程的不确定性
回调函数
如果说这些异步之间不会相互依赖或者不会因为顺序不确定收到影响是么有关系的但是如果我们一些逻辑需要依赖某个异步的返回值那么这个时候我们就需要保证执行顺序这时候我们就需到了回调函数举个例子fun2需要fun1异步执行后的结果fun3又依赖于 fun2 异步执行结束后的结果所以我们通过回调函数来保证执行顺序。 Promise
我们能够看出上面的代码中多级嵌套的回调函数弊端很多不直观强耦合回调的不确定性不利于维护与复用我们上面仅仅是非常简单的一个场景那如果我们有很复杂的需求的话非常多的回调嵌套就容易产生回调地狱。为了解决这个问题Promise 出现了它将这种回调函数的嵌套改为链式调用。并用then保证执行顺序。Promise还能保证每次返回的都是一个新的Promise对象所以代码一定被异步执行。 我们发现上面的代码可读性就明显略胜一筹通过这样一个链式的结构让我们清晰的看出谁依赖谁对我们的后期代码维护更加友好但这也仅仅是我们的一个小小的案例如果是复杂的业务的话我们一直链式其实可读性也会随之增多也变得费劲。
async、await
Promise 是为了避免回调地狱的但是 Promise 还是不够简明语义化随着业务逻辑的增加可能会有超级多 then 于是有了async和await先从字面意思来理解 async 是“异步”的简写而 await 可以认为是 async wait 的简写所以应该很好理解 async 用于申明一个 function 是异步的而 await 用于等待一个异步方法执行完成。async 和 await 是es7提供的语法是 es7最重要特性之一相比于es6的promise 具有更高的代码可读性因此也被称为promise 的语法糖。它把异步执行的代码写得像同步代码那样直观。
async
快速创建一个异步函数我们的 async 包裹后的函数就自动转化成一个异步的 Promise 下面我们来证实一下 按照我们的理解其实上面的log应该打印的是我们的 return 出来的几何心凉对吧但是他打印出来的是一个 Promise 等同于下面的代码当然这种只是我们的函数中仅仅是返回一个结果但如果我们涉及到业务或者负责内容的时候还是需要我们去书写 promise 的这点也比较鸡肋。
bodyscriptfunction fun1() {let p new Promise(rv {rv(几何心凉)})return p}console.log(fun1())/script
/bodyawait
await 并不是将异步代码转化成同步他只是改变了调用方式让我们从调用的代码层面看着相似于同步从而增加代码的可读性而且 await 也不是在任何地方都可以用的它只能使用在 async 和模块中使用首先让我们来看一下在 async 中的使用 说明 调用异步函数时在函数前直接使用await对函数进行调用一旦遇到await就会立即返回一个pending状态的Promise对象暂时返回执行代码的控制权使得函数外的代码得以继续执行这是保证非阻塞的部分。他会等待 Promise 函数返回结果可以通过变量来接收这个结果既然是等待了那不就是说明阻塞了么其实并不是我们可以看到图中的 fun4 前面加上了 async 就说明我们的 fun4 是异步的了异步代码就不会阻塞后面的代码执行而我们的 await 是在异步函数中去控制了依赖项的执行顺序。
当然在我们的 Promise 中我们出现了报错我们是通过 catch 然后去处理的在我们的 await 中我们又该如何处理呢当然我们可以通过我们同步的办法 try-catch 来处理异常 刚才我们上面提到说我们的 await 可以在模块中使用下面我们来看一下如何在模块中使用上面的例子如果我们直接把黄色框中的内容放到我们的外部来执行会报错但是我们把 script 的类型改成模块就可以了注意如果改成模块的话我们 await 只能在最外层作用域中使用 小结
我们的代码中会通过异步的方式来防止代码阻塞当我们多个异步之间有相互的执行结果依赖的时候我们就需要锁定他们的执行顺序早起的回调函数为我们解决了不确定顺序的问题但是由于大批量的使用回调函数造成代码的可读性、维护性非常低后面出现了我们的 Promise 通过 then 进行链式结构提高了可读性但是随着业务的复杂度增加我们的链式可读性也会随之降低所以es7出现了 async、await 改变了调用的方式让调用呈现出来的代码相似于同步进而提升代码可读性async 通过 async 声明的函数它的返回值会自动包装为 Promise它声明的异步函数中可以通过 await 去调用其他的异步函数await 让我们通过同步的方式去调用异步函数让我们的代码可读性更高await 的使用位置有两个一个是我们 async 声明的异步函数中一个是我们的 js 模块的最外层作用域中
