前端异步流程工具与后端渲染

前端异步流程工具

1. promise
2. genreator 函数
3. Async 函数

• async函数式由es6提供的
• async函数的底层其实就是generator函数
• async函数需要和关键字 await 搭配使用
• async也是Promise,也可以调用.then

const asyncFn = async () => {
await 任务
}
var obj = {
async aa () {
await 任务
}
}

• notice:
  只有await后面的任务 顺利执行完成，那么下面的任务才会去执行，如果await后面的任务执行不顺利， 那么后面的任务会出问题
• 使用场景：
  先进行数据请求，得到数据之后，在去操作这个数据 ，这个时候，我们的async就是首选

4. node.js 的nextTick

• Node.js提供的两个方法

1. nextTick
2. setimmediate

• 总结：

1. nextTick()的回调函数执行的优先级要高于setImmediate();
2. process.nextTick()属于idle观察者,setImmediate()属于check观察者.在每一轮循环检查中,idle观察者先于I/O观察者,I/O观察者先于check观察者.

• idle观察者，也就是事件轮询最先进行的任务
• I/O观察者， 也就是事件轮询中的任务（任务中的回调函数）
• check观察者 事件轮询中的任务的结束
  在具体实现上,process.nextTick()的回调函数保存在一个数组中,
  setImmediate()的结果则是保存在链表中.
  在行为上,process.nextTick()在每轮循环中会将数组中的回调函数全部执行完.
  而setImmediate()在每轮循环中执行链表中的一个回调函数.
  使用格式：
• process.nextTick( callback )
• setImmediate( callback )
  执行顺序

1. nextTick> setImmediate
2. nextTick 中 的nextTick > 外层的setImmediate
3. 外层setImmediate > 内层的setImmediate

process.nextTick( function () {
console.log('A')
process.nextTick( function(){
console.log('D')
})
setImmediate( function () {
console.log('E')
})
})
setImmediate( function () {
console.log( 'B' )
process.nextTick( function(){
console.log('F')
})
setImmediate( function () {
console.log('G')
})
})
process.nextTick( function () {
console.log( 'C')
})
console.log( '主线程任务' )

5. 第三方的node.js

前端原生js提供的数据请求有两种

1. ajax
2. fetch

gulp 4.x

• 多任务执行

1. 串行 （概念等同于串联）
2. 并行 （概念等同于并联）

前端渲染 vs 后端渲染

1. 前端渲染是通过ajax请求数据，然后通过js语法将数据展示到页面中，称之为前端渲染
2. 后端渲染是通过后端语言 + 后端模板( ejs ) 将 页面整个发送给前端
3. 后端模板
4. ejs
5. pug( jade )
6. art-template
   现在流行的： 前端渲染
   问题： 当前后端同时进行项目开发是， 后端数据接口没有写好，但是前端却需要这个接口，这个时候怎么办？
   分析： 需要一段数据
   解决： 模拟假数据（ mock数据 json-server / mock.js ）
   以上这种形式叫做 ： 前后端架构分离
   以前称之为： 前后端耦合
7. Node.js做项目的时候 ，就有两种选择了
8. 前后端分离 ：后端提供接口，前端渲染
9. 前后端耦合： 后端渲染
10. 直接借助一个工具来搭建一个Node.js项目，这个工具叫做 express-generator ,这个工具帮助我们实现了express框架
11. 创建express项目的流程
12. 安装 express-generator
    $ cnpm i express-generator -g
13. 创建express 项目
    $ express -e 项目名称 -e是安装 ejs 模板
14. 分析目录

• package.json 整个项目的依赖配置文件
• app.js 是整个项目的入口文件
• views/xx.ejs 是整个项目的模板（模板内容是什么，将来页面呈现就是什么）
• routes 是整个项目的路由配置文件
• public 静态资源文件（img css js )
• node_modules 整个项目的依赖包
• bin / www 整个项目的服务器配置文件

4. 启动项目 package.json 中 npm 脚本
   $ npm run start
5. 研究项目代码

• 入口文件