Asynchronous processes and the front end of the express

Front of the asynchronous flow (must be very important)

  1. Traditional native asynchronous

    • Callback
    • event
  2. Using asynchronous workflow tools (others packaged stuff)

    • es6 Promise
      Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件--更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了语法,原生提供了Promise
    
      所谓Promise ,简单说就是一个容器,里面保存着某个未来才回结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。 
      Promise 对象的状态不受外界影响
    
      三种状态:
    
      pending:进行中
      fulfilled :已经成功
      rejected 已经失败
      状态改变: 
      Promise对象的状态改变,只有两种可能:
    
      从pending变为fulfilled
      从pending变为rejected。
      这两种情况只要发生,状态就凝固了,不会再变了,这时就称为resolved(已定型)
      
    
    const p1 = new Promise( function ( resolve,reject ){
    resolve( 'A' );
    }).then (data =>{
        console.log(data);
    })
    
    const p2 = new Promise( function ( resolve,reject ){
        setTimeout(() =>{
            resolve( 'B' );
        },1000)
    }).then (data =>{
        console.log(data);
    })
    
    const p3 = new Promise( function ( resolve,reject ){
        resolve( 'C' );
    }).then (data =>{
        console.log(data);
    })
    
    
    console.log('主线程任务')
    
    
    Promise.all( [p1,p2,p3], () =>{
        // console.log('D')   //主线程 A C
    })
    
    Promise.race( [p1,p2,p3],() =>{
        // console.log('race') //主线程 A C B
    })
    
    
    • es6 generator function
     function* showWords(){
         yield 'one';
         yield 'two';
         return 'three';
     }
     var show = showWords();
     console.log(show.next());
     console.log(show.next());
     console.log(show.next());
    
    
    
    • es6 (7) async function
    • node.js in nextTick setImmudiate
      nextTick()的回调函数执行的优先级要高于setImmediate();
    
      process.nextTick()属于idle观察者,setImmediate()属于check观察者.在每一轮循环检查中,idle观察者先于I/O观察者,I/O观察者先于check观察者.
    
      在具体实现上,process.nextTick()的回调函数保存在一个数组中,
      setImmediate()的结果则是保存在链表中.
      在行为上,process.nextTick()在每轮循环中会将数组中的回调函数全部执行完.
      而setImmediate()在每轮循环中执行链表中的一个回调函数.
    
    
      nextTick > 回调函数 > setImmediate
    
    • Third-party library async.js
    功能: 
      1. 可以实现异步
      2. 串行series和并行parallel
    

Summary:
asynchronous processes asynchronous task is placed in the queue, the queue only take asynchronous execution after executing the main thread
3. References

  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 in nextTick () and setimmediate ()
    https://www.cnblogs.com/5ishare/p/5268273.html

  5. async library
    https://caolan.github.io/async/

Reference Documents
Event-Loop
http://www.ruanyifeng.com/blog/2014/10/event-loop.html?bsh_bid=983729729
history of the most easy to read and understand Promise / A + fully realized
https://zhuanlan.zhihu.com / p / 21834559

Summary: The
master key is the Promise and async function

npm scripts npm script

  1. To understand why npm script command script centralized storage of all current projects
  2. npm script uses npm run xxx
  3. npm multi-script execution npm run xxx & npm run xxx npm run xxx && npm run xxx
  4. npm script can be abbreviated, but only about a few
    npm Start
    npm STOP
    npm the Test
    npm restart

express

  1. Why learn express?

    • express is the core of the framework Node.js
    • express can help us quickly build web server / api server
    • express generation tool provides a fast express-generator
      • Quick generation tools: help us quickly create a project tool
  2. Express-generator installation

  • Global Installation
    $ npm i express-generator -g
    $ cnpm i express-generator -g
    $ yarn add express-generator global
  • If your npm version 5.2+ above, then you can not use global installed, you can use npx the
    format: $ npx express 模板配置 项目名称
    an example
    $ npx express -e express_demo
    to explain:
    -e means that we use a template index.ejs called ejs can be compatible html tags can be written js syntax
  1. Project Directory Structure
  • bin
    • www started a static server (web server)
  • node_modules really a project dependencies
  • public static resource files
  • routes Routing folder
  • view
    • xxx.ejs project templates
  • app.js entire project entry file
  • package.json really a project depends profile
  1. app.js file code reading

    • app object function
      • It is to use some functions with specific functions (these functions we have to have a name, called middleware)
      • We use these middleware by app.use
    • Middleware Category
      • Application-level central parity cors
      • Routing intermediate app.get ( '/', function (req, res, next) {})
      • Error handling middleware function (err, req, res, next) {}
  2. Create a page out of the express

Summary: These items express backend rendering of the project

Guess you like

Origin blog.csdn.net/weixin_45213847/article/details/93303053