异步流程工具

最新推荐文章于 2025-01-02 10:16:19 发布

ccc_y

最新推荐文章于 2025-01-02 10:16:19 发布

阅读量367

点赞数

CC 4.0 BY-SA版权

文章标签： node

本文链接：https://blog.youkuaiyun.com/ccc_y/article/details/90272941

这篇博客探讨了前端异步流程管理，包括Promise、Generator函数和Async函数的使用，强调了async/await在数据请求后的操作中的重要性。同时，文章详细介绍了Node.js的nextTick和setImmediate的执行顺序及区别，并提到了第三方库async.js的串行和并行任务处理。此外，还讨论了前端原生的数据请求方法、gulp工作流以及前端和后端渲染的区别，最后提到了模拟数据工具如json-server和mock.js在前后端分离开发中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端异步流程工具

Promise √
Generator函数
Async函数 √
- async函数式由es6提供的
- async函数的底层其实就是generator函数
- async函数需要和关键字 await 搭配使用
- async也是Promise,也可以调用.then
- 格式
```
const asyncFn = async () => {
      await 任务
    }

或

    var obj = {
      async aa () {
        await 任务
      }
    }
```
- 注意：只有await后面的任务顺利执行完成，那么下面的任务才会去执行，如果await后面的任务执行不顺利，那么后面的任务会出问题
- 使用场景：先进行数据请求，得到数据之后，在去操作这个数据，这个时候，我们的async就是首选
```
const asyncFn = async () => {
  const request = await '任务一'
  console.log(' 任务2 ')
  console.log( request )

}

asyncFn()
console.log( '主线程任务' )
```
Node.js 提供的 nextTick
- Node.js提供的两个方法
  1. nextTick
  2. setimmediate
- 总结
  
  nextTick()的回调函数执行的优先级要高于setImmediate();
  
  process.nextTick()属于idle观察者,setImmediate()属于check观察者.在每一轮循环检查中,idle观察者先于I/O观察者,I/O观察者先于check观察者.
  
  - idle观察者，也就是事件轮询最先进行的任务
  
  - I/O观察者，也就是事件轮询中的任务（任务中的回调函数）
  
  - check观察者事件轮询中的任务的结束
  
  在具体实现上,process.nextTick()的回调函数保存在一个数组中,
  
  setImmediate()的结果则是保存在链表中.
  
  在行为上,process.nextTick()在每轮循环中会将数组中的回调函数全部执行完.
  
  而setImmediate()在每轮循环中执行链表中的一个回调函数.
- 使用格式
  1. process.nextTick( callback )
  2. 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( '主线程任务' )
```

第三方的async.js

串行： series
并行： parallel
串行格式：

async.series({ 任务名称：任务值 },function( err, data ) {})
并行格式：

async.parallel({ 任务名称：任务值 },function( err, data ) {})

var async = require( 'async' )
//串行 
async.series({
  one: function( callback ) {
    setTimeout ( function () {
      callback( null, '任务1' )
    },2000)
  },
  two: function ( callback ) {
    setTimeout ( function () {
      callback( null, '任务2')
    },1000)
  }
},function ( err , data ) {
  console.log( data )
}) 

//并行
async.parallel({
  one: function ( callback ) {
    setTimeout ( function () {
      callback( null , '任务1')
    },2000)
  },
  two: function ( callback ) {
    setTimeout ( function () {
      callback( null , '任务2')
    },1000)
  }
},function(error,data){
  console.log( data )

  console.log( '任务3' )
})

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

ajax
fetch

gulp 4.x

多任务执行
1. 串行
2. 并行

前端渲染 vs 后端渲染

前端渲染是通过ajax请求数据，然后通过js语法将数据展示到页面中，称之为前端渲染
后端渲染是通过后端语言 + 后端模板( ejs ) 将页面整个发送给前端
1. 后端模板
  1. ejs
  2. pug( jade )
  3. art-template
2. 现在流行的：前端渲染
  - 问题：当前后端同时进行项目开发是，后端数据接口没有写好，但是前端却需要这个接口，这个时候怎么办？
    分析：需要一段数据
    解决：模拟假数据（ mock数据 json-server / mock.js ）
  - 以上这种形式叫做：前后端架构分离
  - 很久以前，没有前端岗位的，所有的网页都需要后端完成，那个时候的情况我们称之为：前后端耦合
Node.js做项目的时候，就有两种选择了
1. 前后端分离：后端提供接口，前端渲染
2. 前后端耦合：后端渲染
直接借助一个工具来搭建一个Node.js项目，这个工具叫做 express-generator ,这个工具帮助我们实现了express框架
创建express项目的流程
1. 安装 express-generator
  $ cnpm i express-generator -g
2. 创建express 项目
  $ express -e 项目名称 -e是安装 ejs 模板
3. 分析目录
  - package.json 整个项目的依赖配置文件
  - app.js 是整个项目的入口文件
  - views/xx.ejs 是整个项目的模板（模板内容是什么，将来页面呈现就是什么）
  - routes 是整个项目的路由配置文件
  - public 静态资源文件（img css js )
  - node_modules 整个项目的依赖包
  - bin / www 整个项目的服务器配置文件
4. 启动项目 package.json 中 npm 脚本
  $ npm run start
5. 研究项目代码
  - 入口文件