前端的异步流程,npm脚本, express

前端的异步流程

1. 传统的原生异步

   • 回调函数
   • 事件

2. 使用异步流程工具（ 别人封装好的东西 ）

   • es6 Promise

      Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise
   
      所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。 
      Promise 对象的状态不受外界影响
   
      三种状态:
   
      pending：进行中
      fulfilled :已经成功
      rejected 已经失败
      状态改变： 
      Promise对象的状态改变，只有两种可能：
   
      从pending变为fulfilled
      从pending变为rejected。
      这两种情况只要发生，状态就凝固了，不会再变了，这时就称为resolved（已定型）
   

              const p1 = new Promise((resolve, reject) => {
            resolve('任务一')
        }).then(data => {
            console.log(data)
        })
 
        const p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('任务三')
            }, 1000)
        }).then(data => {
            console.log(data)
        })
 
        const p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
 
                resolve('任务二')
            }, 2000)
        }).then(data => {
            console.log(data)
        })

    console.log('主线程任务')

    // all  race 

    Promise.all([p1, p2, p3], () => {
        console.log('任务四')
    })

    // Promise.race( [p1,p2,p3],() => {

    // })

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 库

  案例：
    parallel
  
    series
  
  功能： 
    1. 可以实现异步
    2. 串行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. 参考资料
   1. Promise
      https://blog.csdn.net/MrJavaweb/article/details/79475949
   2. Generator
      https://www.cnblogs.com/imwtr/p/5913294.html
   3. Async-await
   4. Node.js 中的nextTick()和setimmediate()
      https://www.cnblogs.com/5ishare/p/5268273.html
   5. 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

重点掌握的是  Promise  和  async  函数

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
     • 快速生成工具： 帮助我们快速创建一个项目的工具
2. 安装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语法

3. 项目目录结构

• bin
  • www 启动了一个静态服务器（ web服务器 ）
• node_modules 真个项目的依赖包
• public 静态资源文件
• routes 路由文件夹
• view
  • xxx.ejs 项目的模板
• app.js 整个项目的入口文件
• package.json 真个项目的依赖配置文件

4. app.js文件代码解读
   • app对象的功能
     • 是为了使用一些具有特定功能的函数（ 这些函数我们给起了一个名字 ， 叫做中间件 ）
     • 我们通过app.use 来使用这些中间件
   • 中间件分类
     • 应用级中间价 cors
     • 路由中间件 app.get( ‘/’, function ( req,res,next ) {})
     • 错误处理中间件 function ( err , req,res,next ) {}
5. 在express中创建一个页面出来