前端的异步流程

前端的异步流程 ( 重点)

  1. 传统的原生异步
  • 回调函数
  • 事件
  1. 使用异步流程工具( 别人封装好的东西 )
  • es6 Promise
    Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件--更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了语法,原生提供了Promise
    所谓Promise ,简单说就是一个容器,里面保存着某个未来才回结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。
    Promise 对象的状态不受外界影响
    三种状态:
    pending:进行中
    fulfilled :已经成功
    rejected 已经失败
    状态改变:
    Promise对象的状态改变,只有两种可能:
    从pending变为fulfilled
    从pending变为rejected。
    这两种情况只要发生,状态就凝固了,不会再变了,这时就称为resolved(已定型)
  • es6 generator函数
  • es6( 7 ) async 函数
  • node.js中的 nextTick setImmudiate
    nextTick()的回调函数执行的优先级要高于setImmediate();
    process.nextTick()属于idle观察者,setImmediate()属于check观察者.在每一轮循环检查中,idle观察者先于I/O观察者,I/O观察者先于check观察者.
    在具体实现上,process.nextTick()的回调函数保存在一个数组中,
    setImmediate()的结果则是保存在链表中.
    在行为上,process.nextTick()在每轮循环中会将数组中的回调函数全部执行完.
    而setImmediate()在每轮循环中执行链表中的一个回调函数.
    nextTick > 回调函数 > setImmediate
  • 第三方的 async.js 库
    总结:
    异步流程的任务是放在异步队列中的,异步队列只有在主线程执行完之后采取执行
  1. 参考资料
  2. Promise
    https://blog.csdn.net/MrJavaweb/article/details/79475949
  3. Generator
    https://www.cnblogs.com/imwtr/p/5913294.html
  4. Async-await
  5. Node.js 中的nextTick()和setimmediate()
    https://www.cnblogs.com/5ishare/p/5268273.html
  6. async库
    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

npm scripts npm脚本

  1. 明白为什么要使用npm脚本 集中存储当前项目的所有脚本命令
  2. npm脚本使用 npm run xxx
  3. npm多脚本执行 npm run xxx & npm run xxx npm run xxx && npm run xxx
  4. npm脚本可以简写,但是仅限一下几个
    npm start
    npm stop
    npm test
    npm restart

express

  1. 为什么要学习express?
  • express是Node.js的核心框架
  • express可以帮助我们快速构建web服务器 / api服务器
  • express提供了一个快速生成工具 express-generator
  • 快速生成工具: 帮助我们快速创建一个项目的工具
  1. 安装express-generator
  • 全局安装
    $ npm i express-generator -g
    $ cnpm i express-generator -g
    $ yarn add express-generator global
  • 如果你的npm版本 在 5.2+以上,那么你可以不使用全局安装,使用npx就可以了
    格式:$ npx express 模板配置 项目名称
    举例
    $ npx express -e express_demo
    解释:
    -e 指的是我们使用一个叫做ejs的模板 index.ejs 可以兼容html标签,可以书写js语法
  1. 项目目录结构
  • bin
  • www 启动了一个静态服务器( web服务器 )
  • node_modules 真个项目的依赖包
  • public 静态资源文件
  • routes 路由文件夹
  • view
  • xxx.ejs 项目的模板
  • app.js 整个项目的入口文件
  • package.json 真个项目的依赖配置文件
  1. app.js文件代码解读
  • app对象的功能
  • 是为了使用一些具有特定功能的函数( 这些函数我们给起了一个名字 , 叫做中间件 )
  • 我们通过app.use 来使用这些中间件
  • 中间件分类
  • 应用级中间价 cors
  • 路由中间件 app.get( ‘/’, function ( req,res,next ) {})
  • 错误处理中间件 function ( err , req,res,next ) {}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值