网站建设销售简历,系统更新,天津市建设工程信息网专家网,铜仁建设局网站首页目录
一、同步和异步简介
同步#xff08;按顺序执行#xff09;
异步#xff08;不按顺序执行#xff09;
异步出现的原因和需求
二、实现异步的方法
回调函数
Promise
生成器Generators/ yield
async await
三、promise和 async await 区别
概念
两者的区别 …目录
一、同步和异步简介
同步按顺序执行
异步不按顺序执行
异步出现的原因和需求
二、实现异步的方法
回调函数
Promise
生成器Generators/ yield
async await
三、promise和 async await 区别
概念
两者的区别
四、defer和async区别 一、同步和异步简介 同步按顺序执行 指在 主线程上排队执行的任务只有前一个任务执行完毕才能继续执行下一个任务。也就是调用一旦开始必须这个调用 返回结果即任务完成才能继续往后执行。程序的执行顺序 和任务排列顺序是一致的。 异步不按顺序执行 异步任务是指不进入主线程而进入 任务队列的任务只有任务队列通知主线程某个异步任务 可以执行了该任务才会进入主线程。每一个任务有一个或多个 回调函数。前一个任务结束后不是执行后一个任务,而是执行回调函数后一个任务则是不等前一个任务结束就执行。程序的执行顺序和任务的排列顺序是不一致的异步的。我们常用的setTimeout和setInterval函数Ajax都是异步操作 异步出现的原因和需求 避免阻塞异步编程允许程序在等待耗时的操作时继续响应其他任务提高程序的并发性和响应性能。提高性能对于耗时的操作例如网络请求、文件读写等异步编程可以允许同时执行多个操作从而提高整体性能。用户体验在前端应用中异步编程非常重要可以确保用户界面在进行耗时操作时不会被阻塞保持流畅的交互体验。并发编程在服务器端或多线程环境中异步编程也是必要的可以提高系统的吞吐量和并发性能。 异步情况涉及事件循环可了解 前端面试高频考点—事件循环Event loop_前端面试eventloop-CSDN博客 二、实现异步的方法 回调函数Callback、事件监听、发布订阅、Promise、生成器Generators/ yield、async/await 1. JS 异步编程进化史callback - promise - generator - async await 2. async/await 函数的实现就是将 Generator 函数和自动执行器包装在一个函数里。 3. async/await可以说是异步终极解决方案了。 (1) async/await函数相对于Promise优势体现在 处理 then 的调用链能够更清晰准确的写出代码并且也能优雅地解决回调地狱问题。当然async/await函数也存在一些缺点因为 await 将异步代码改造成了同步代码如果多个异步 代码没有依赖性却使用了 await 会导致性能上的降低代码没有依赖性的话完全可以使用 Promise.all 的方式。 (2) async/await函数对 Generator 函数的改进体现在以下三点 内置执行器。 Generator 函数的执行必须靠执行器所以才有了 co 函数库而 async 函数 自带执行器。也就是说async 函数的执行与普通函数一模一样只要一行。更广的适用性。 co 函数库约定yield 命令后面只能是 Thunk 函数或 Promise 对象而 async 函数的 await 命令后面可以跟 Promise 对象和原始类型的值数值、字符串和布 尔值但这时等同于同步操作。更好的语义。 async 和 await比起星号和 yield语义更清楚了。async 表示函数里有异步 操作await 表示紧跟在后面的表达式需要等待结果。 回调函数 你到一个商店买东西刚好你要的东西没有货于是你在店员那里留下了你的电话过了几天店里有货了店员帮你买了并且送到了你家。在例子中你的电话号码就叫回调函数你把电话留给店员就叫登记回调函数店里后来有货了叫做触发了回调关联的事件店员帮你买了叫做调用回调函数送到了你家叫做响应回调事件。 回调函数的优点是简单、容易理解和实现缺点是不利于代码的阅读和维护各个部分之间高度耦合使得程序结构混乱、流程难以追踪尤其是多个回调函数嵌套的情况容易出现回调地狱而且每个任务只能指 定一个回调函数。此外它不能使用 try catch 捕获错误不能直接 return Promise Promise本意是承诺在程序中的意思就是承诺我过一段时间后会给你一个结果。promise本是同步的只是他的then函数resolved和rejected是异步的所以当我们在构造 Promise 的时候构造函数内部的代码是立即执行的 Promise的三种状态 Pending----Promise对象实例创建时候的初始状态Fulfilled----可以理解为成功的状态Rejected----可以理解为失败的状态 生成器Generators/ yield Generator 函数是 ES6 提供的一种异步编程解决方案语法行为与传统函数完全不同 Generator 最大的特点就是可以控制函数的执行。语法上首先可以把它理解成Generator 函数是一个状态机封装了多个内部状态。Generator 函数除了状态机还是一个遍历器对象生成函数。可暂停函数, yield可暂停next方法可启动每次返回的是yield后的表达式结果。yield表达式本身没有返回值或者说总是返回undefined。next方法可以带一个参数该参 数就会被当作上一个yield表达式的返回值。 我们先来看个例子 function *foo(x) {
let y 2 * (yield (x 1))
let z yield (y / 3)
return (x y z)
}
let it foo(5)
console.log(it.next()) // {value: 6, done: false}
console.log(it.next(12)) // {value: 8, done: false}
console.log(it.next(13)) // {value: 42, done: true} 可能结果跟你想象不一致接下来我们逐行代码分析 首先 Generator 函数调用和普通函数不同它会返回一个迭代器当执行第一次 next 时传参会被忽略并且函数暂停在 yield (x 1) 处所以返回 5 1 6当执行第二次 next 时传入的参数12就会被当作上一个yield表达式的返回值如果你不传 参yield 永远返回 undefined。此时 let y 2 * 12所以第二个 yield 等于 2 * 12 / 3 8当执行第三次 next 时传入的参数13就会被当作上一个yield表达式的返回值所以 z 13, x 5, y 24相加等于 42 async await 使用async/await你可以轻松地达成之前使用生成器和co函数所做到的工作,它有如下特点 1. async/await是基于Promise实现的它不能用于普通的回调函数 2. async/await与Promise一样是非阻塞的。 3. async/await使得异步代码看起来像同步代码这正是它的魔力所在。 一个函数如果加上 async 那么该函数就会返回一个 Promise 三、promise和 async await 区别 概念 Promise 是异步编程的一种解决方案比传统的解决方案——回调函数和事件——更合理和更强 大简单地说Promise好比容器里面存放着一些未来才会执行完毕异步的事件的结果而 这些结果一旦生成是无法改变的async await也是异步编程的一种解决方案他遵循的是Generator 函数的语法糖他拥有内置执 行器不需要额外的调用直接会自动执行并输出结果它返回的是一个Promise对象。 两者的区别 Promise的出现解决了传统callback函数导致的“地域回调”问题但它的语法导致了它向纵向 发展行成了一个回调链遇到复杂的业务场景这样的语法显然也是不美观的。而async await代码看起来会简洁些使得异步代码看起来像同步代码await的本质是可以提供等同 于”同步效果“的等待异步返回能力的语法糖只有这一句代码执行完才会执行下一句。async await与Promise一样是非阻塞的。async await是基于Promise实现的可以说是改良版的Promise它不能用于普通的回调函 数。 四、defer和async区别 区别主要在执行时间defer会在文档解析完之后执行,并且多个defer会按照顺序执行而async则 是在js加载好之后就会执行,并且多个async,哪个加载好就执行哪个 在没有defer或者async的情况下会立即执行脚本,所以通常建议把script放在body最后async有async的话,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行异步。 但是多个js文件的加载顺序不会按照书写顺序进行derer有derer的话,加载后续文档元素的过程将和 script.js 的加载并行进行异步但是 script.js 的执行要在所有元素解析完成之后DOMContentLoaded 事件触发之前完成,并且多个defer会按照顺 序进行加载。
