前端的异步流程
-
传统的原生异步
- 回调函数
- 事件
-
使用异步流程工具( 别人封装好的东西 )
es6 Promise-
Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件--更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了语法,原生提供了Promise
-
所谓Promise ,简单说就是一个容器,里面保存着某个未来才回结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。
Promise 对象的状态不受外界影响 -
三种状态:
pending:进行中
fulfilled :已经成功
rejected 已经失败
状态改变:
Promise对象的状态改变,只有两种可能:- 从pending变为fulfilled
- 从pending变为rejected。
这两种情况只要发生,状态就凝固了,不会再变了,这时就称为resolved(已定型)
es6 generator函数
generator函数
在function关键字后面加一个* 这样定义的函数就叫做generator函数
通过yield关键字来定义任务
通过fn().next() 来执行任务
value表示yield关键字后任务执行的结果
done表示当前定义的所有的任务是否执行完成的一个状态
理解:
多任务的定义,多任务执行
让自己定义的多个任务依次执行,上一个任务如果没有完成,下一个任务就不会开始function* fn () { yield '任务一' yield '任务二' return '任务' } const a = fn() console.log( a.next() ) // { value: '任务一',done: false } console.log( a.next() ) console.log( a.next() ) console.log( '主线程任务' )
-
`
es6( 7 ) async 函数
async函数
es6提供
配合关键字 await使用
await 表示,等待,任务一执行结束之后,才会执行任务二
async function fn () {
const result = await '任务一'
console.log( result )
console.log( '任务二' )
}
fn()
const fn1 = async () => {
const res = await '任务3'
console.log( res )
console.log( '任务四' )
}
fn1()
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 库
功能:
- 可以实现异步
- 串行series和并行parallel
const async = require( ‘async’ )
async.series({
one: function ( callback ) {
setTimeout( function () {
callback( null, 1)
},200)
},
two: function ( callback ) {
setTimeout( function () {
callback ( null , 2 )
},100)
}
}, function ( error , results ) {
console.log( 'series',results )
})
console.log( '主线程' )
async.parallel({
one: function ( callback ) {
setTimeout( function () {
callback( null, 1)
},200)
},
two: function ( callback ) {
setTimeout( function () {
callback ( null , 2 )
},100)
}
}, function ( error , results ) {
console.log( 'parallel',results )
})
总结:
异步流程的任务是放在异步队列中的,异步队列只有在主线程执行完之后采取执行
3**. 参考资料
-
Promise
https://blog.csdn.net/MrJavaweb/article/details/79475949 -
Async-await
-
Node.js 中的nextTick()和setimmediate()
https://www.cnblogs.com/5ishare/p/5268273.html
参考文档
Event-loop
http://www.ruanyifeng.com/blog/2014/10/event-loop.html?bsh_bid=983729729
史上最易读懂的 Promise/A+ 完全实现
https://zhuanlan.zhihu.com/p/21834559
总结:
重点掌握的是 Promise 和 async 函数
扩展: 要求: 你能认识别人写的是什么
npm scripts npm脚本
- 明白为什么要使用npm脚本 集中存储当前项目的所有脚本命令
- npm脚本使用 npm run xxx
- npm多脚本执行 npm run xxx & npm run xxx npm run xxx && npm run xxx
- npm脚本可以简写,但是仅限一下几个
npm start
npm stop
npm test
npm restart
express
-
为什么要学习express?
- express是Node.js的核心框架
- express可以帮助我们快速构建web服务器 / api服务器
- express提供了一个快速生成工具 express-generator
- 快速生成工具: 帮助我们快速创建一个项目的工具
-
安装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语法
- 项目目录结构
- bin
- www 启动了一个静态服务器( web服务器 )
- node_modules 真个项目的依赖包
- public 静态资源文件
- routes 路由文件夹
- view
- xxx.ejs 项目的模板
- app.js 整个项目的入口文件
- package.json 真个项目的依赖配置文件
-
app.js文件代码解读
- app对象的功能
- 是为了使用一些具有特定功能的函数( 这些函数我们给起了一个名字 , 叫做中间件 )
- 我们通过app.use 来使用这些中间件
- 中间件分类
- 应用级中间价 cors
- 路由中间件 app.get( ‘/’, function ( req,res,next ) {})
- 错误处理中间件 function ( err , req,res,next ) {}
- app对象的功能
-
在express中创建一个页面出来
总结: 以上express项目为后端渲染的项目