关于前端async

最新推荐文章于 2025-01-06 13:54:29 发布
原创 最新推荐文章于 2025-01-06 13:54:29 发布 · 422 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章目录

自定义包上传npmjs

记住要发送的邮箱激活

切换你的npm源

你的包的名称不要和别人的重复

步骤

1.登陆npm账号

npm adduser

2.上传

npm publish

node后端路由的基本原理

后端路由其实就是一个web服务器

路由:

以前:多页面
index.html
a标签 herf = “./detail.html”
a标签 herf = “./shopcar.html”
现在流行:单页面
index.html
这个时候，会将detail/shopcar做成模板 [ejs pug(jade) [Node.js专用] ]
favicon binary（二进制）

npm脚本 npm scripts

1. 概念: npm 脚本指的是package.json中的scripts字段

2.认识package.json

package.json是记录项目依赖包信息和npm脚本命令的一个配置文件

  • 项目依赖包信息:

  • dependencies 生产环境的依赖包

  • devDependencies 开发环境使用的依赖包

  • 脚本命令:

  • 在命令行执行的脚本命令

  • npm 命令 & vs &&

  • & 全部执行玩命令，最后输出结果

  • && 依次执行

前短异步流程工具 *****

1.为什么要进行异步的操做？

Javascript是单线程，依次执行一个任务是想让任务能够顺利的进行，我们需要排队异步就是将任务放入异步队列，主线程执行结束之后再去执行

2.前段异步的操作方式

  • 传统方式

  • 回调函数

  • 事件

  • 前端异步流程操作工具 【封装出来的函数、库】

  • es6 Promise

  • 任务的顺序

  • es6 Generator函数

  • 任务的结果

  • es6 - es8 async 函数

  • 任务结果

  • Node中的异步处理工具 : nextTick setImmedate

  • 任务结果

  • 第三方类库： async.js

  • 参考资料

  1. Promise

    https://blog.youkuaiyun.com/MrJavaweb/article/details/79475949

  2. Generator

    https://www.cnblogs.com/imwtr/p/5913294.html

  3. Async-await

    • 里层请求数据结果返回到外层使用

    • Async函数式generator函数 + spawn 自动执行器函数的 封装

  4. Node.js 中的nextTick()和setimmediate()

    https://www.cnblogs.com/5ishare/p/5268273.html

  5. asyc库

    https://caolan.github.io/async/

参考文档

Event-loop

http://www.ruanyifeng.com/blog/2014/10/event-loop.html?bsh_bid=983729729

史上最易读懂的 Promise/A+ 完全实现

https://zhuanlan.zhihu.com/p/21834559

Bambi98
关注
【知识点】谈谈前端开发中的同步和异步，promise、async/await，应用场景，以及在事件循环机制中的区别
代码的魅力，根本走不出来
04-12 2534
async/await 是基于 Promise 的异步编程解决方案，它通过 async 函数将函数的执行结果封装成 Promise 对象，从而让函数的返回值变为 Promise 对象，方便使用 Promise 对象的 then 方法注册回调函数。异步模式的优点是可以提高程序的性能和响应速度，因为在等待某些操作完成的同时，程序可以执行其他操作。Promise 的回调函数执行时机受 Promise 状态变化的影响，async/await 利用 Promise 对象的状态变化来实现暂停和恢复异步操作的执行。
前端 async原理
fucworld的博客
04-29 499
async 原理 async 函数是 ES2017 标准引入的，其与 await 语法搭配，用来更优雅地实现异步编程。与 generator 函数作用类似。不同的是，async 不需要手动调用 next 方法，并且返回值始终是 Promise 对象。 async 函数可以看作多个异步操作，包装成的一个 Promise 对象，而 await 命令就是内部 then 命令的语法糖。 async函数就是将Generator函数的星号(*)替换成async，将 yield替换成 await，仅此而已 async 异
javascript之异步操作理解---回调函数，async，await以及promise对象
qq_44774831的博客
06-10 4230
javascript之异步操作理解---回调函数，async，await以及promise对象概述 概述 写在前面：虽然平时做项目，但是发现自己写的代码还是很烂。最近接触了一个对性能要求比较高的项目，于是重新开始审视自己写的代码是不是达到尽量较小系统性能了。加上前几天学到express框架了解到了回调函数的操作。作为拓展，查了许多资料，再次总结一下javascript的异步操作。 javascript是一门单线程语言,即一次只能完成一个任务,若有多个任务要执行,则必须排队按照队列来执行(前一个任务完成,
前端er，你真的会用 async 吗？
weixin_34253126的博客
12-02 262
async 异步函数 不完全使用攻略 前言 现在已经到 8012 年的尾声了，前端各方面的技术发展也层出不穷，VueConf TO 2018 大会 也发布了 Vue 3.0的计划。而在我们（我）的日常中也经常用 Vue 来编写一些项目。那么，就少不了 ES6 的登场了。那么话说回来，你真的会用 ES6 的 async 异步函数吗？ 1、a...
前端学习--async
snoto的专栏
02-03 1633
aysnc函数
前端宝典二十一：前端异步编程规范手写Promise、async、await
franktaoge的博客
08-30 1196
本文主要探讨前端异步编程的处理方式、处理场景，并且手写Promise的全家桶，介绍async、await方法使用
前端异步(async)解决方案(所有方案)
2401_85124119的博客
06-11 1004
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
前端开源库-async-try-catch
08-30
总之，`async-try-catch` 是一个专注于异步错误处理的前端开源库，它简化了 `async/await` 语法下的错误处理，使得代码更易读、易维护。对于那些经常处理异步操作的开发者来说，这是一个非常有价值的工具。通过深入...
web前端中的async/await用处你知道？
icktpxcls的博客
07-06 592
下文三个装饰器，都是利用了async/await把异步变成同步的特性实现的。 要求被装饰的方法必须写成async/await，用起来十分方便，实现彻底被隐藏在了装饰器内部。 前两个都是用在ts环境下class写法的vue里的。不过看清楚逻辑后，很容易修改成可以用在js环境中的vue组件上。 下面和爱创乐育小编一起来，看一下吧！！！ 一、给vue添加一个指示初始化完成的变量。 指业务相关的初始化逻辑都完成了 比如搜索功能：搜索中显示loading，结果为空时显示暂无数据。但是第一次打开页面时，搜索还没完成，但
前端async await用法
12-06
在前端开发中，async和await是用于处理异步操作的语法糖，使得异步代码的书写和阅读更加简洁和直观。async和await是基于Promise的进一步封装，使用它们可以让异步代码看起来像同步代码一样。 1. **async函数**：...
开开森森学前端之async原理
weixin_34117522的博客
05-03 161
前言 大家在工作中可能用了很多次async了，但可能由于时间精力原因没有研究过async的原理，今天我来给大家简单介绍下async的原理，讲的不好还望谅解！ async语法 async函数会返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。 async function test(){ ...
前端常见问题以及处理方式 - - - (十二) js中的 async 函数
热门推荐
业余丰富各种技术栈
08-11 3万+
js中的 async 和 await
前端笔记之async、awiat
qq_51545970的博客
04-22 509
async async 关键字 写在函数的前面 叫 async 函数 作用: 用于解决异步程序产生的 bug. async 函数只要执行就会返回 promise 实例对象 async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。 async 本身是一个语法糖 语法糖:带有一定功能的关键字 功能:创建并返回一个 promise 实例 语法 async function name([param[, param[, ... p
前端必知：async/await与Promise深度剖析
yan1915766026的博客
01-06 2696
Promise 和 async/await 无疑是前端异步编程领域的两大得力工具。Promise 为异步操作提供了一种规范、可控的抽象，让我们能从 “回调地狱” 的泥沼中挣脱出来，通过链式调用和清晰的状态管理，使得异步代码的逻辑更加直观、易于维护。async/await 则进一步升华，以简洁优雅的语法糖形式，让异步代码呈现出类似同步代码的流畅性，极大地降低了理解成本，提升了开发效率。掌握这两项技术，是每一位前端开发者迈向成熟的必经之路。
前端（十二）——深入理解和使用 async和await
杜永康的博客
08-16 2116
是基于Promise的一种语法糖，它提供了一种更优雅的方式来编写异步代码。通过使用async关键字声明一个异步函数，我们可以在其中使用await关键字等待Promise对象的解决（resolved）或拒绝（rejected），使得代码看起来更像是同步的方式进行编写和阅读。当我们遇到需要代码加载顺序必须同步时，也就是执行顺序必须由上而下，等中间代码执行完毕才能向下执行时。我们需要用async和await来介入，他们的配合使用，可以使异步变为同步，多用于改变接口请求等异步操作。
前端研习录（42）——ES6 Async函数讲解及示例分析
清风不渡
10-14 253
重拾前端记忆，记录学习笔记，现在进入Async函数部分
前端async异步
最新发布
03-14
### 前端 JavaScript 中 `async` 和 `await` 的异步编程使用教程 #### 什么是 `async` 和 `await` `async` 是一种声明函数的关键字，表示该函数内部可能会有异步操作。当一个函数被标记为 `async` 后，它会返回一个 `Promise` 对象[^2]。而 `await` 则是一个运算符，只能在 `async` 函数中使用，用于等待一个 `Promise` 完成并返回其结果。如果 `Promise` 被拒绝，则抛出错误。 #### 如何定义和调用 `async` 函数 下面展示了一个简单的例子来说明如何定义和调用带有 `async` 和 `await` 的函数： ```javascript // 定义一个异步函数 async function fetchData() { try { // 使用 await 等待 Promise 返回的结果 const response = await fetch('https://api.example.com/data'); if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`); // 将响应转换为 JSON 数据 const data = await response.json(); console.log(data); } catch (error) { // 错误处理逻辑 console.error('数据获取失败:', error.message); } } // 调用异步函数 fetchData(); ``` 上述代码展示了如何利用 `async/await` 进行网络请求，并捕获可能发生的异常[^4]。 #### 链式调用与错误处理 虽然可以使用 `.then()` 方法链来进行多个异步任务的连续执行，但是 `async/await` 提供了一种更直观的方式实现同样的功能。例如，在完成第一个 API 请求之后再发起第二个请求： ```javascript async function getTwoRequests() { let firstResponse; let secondResponse; try { // 执行第一次请求 firstResponse = await fetch('https://api.example.com/users'); if (!firstResponse.ok) throw new Error(`First request failed with status code ${firstResponse.status}`); const users = await firstResponse.json(); // 获取某个用户的 ID 并基于此发起第二次请求 const userId = users[0].id; // 假设我们取第一位用户ID secondResponse = await fetch(`https://api.example.com/user/${userId}/details`); if (!secondResponse.ok) throw new Error(`Second request failed with status code ${secondResponse.status}`); const userDetails = await secondResponse.json(); console.log(userDetails); } catch (err) { console.error(err.message); } } getTwoRequests(); ``` 这段代码演示了两个相继依赖的 HTTP 请求是如何通过 `async/await` 实现清晰表达的[^1]。 #### 总结 - `async` 函数总是返回一个 `Promise`。 - 在 `async` 函数体内，可以用 `await` 表达式暂停当前线程直至指定的操作完成。 - 如果发生错误，可以通过 `try...catch` 结构优雅地捕捉这些错误。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值