前端路由以及前端异步流程工具

引用类型的清除 null delete

var a = 1 不容易清除

• response 给前端的东西 发送的信息
• request 表示请求他人的东西

req.url 输出的是路径

• /shopcar

• /detail

静态资源目录 static

阿帕奇服务器中的www就是静态资源目录

原生的后端路由

后端路由其实就是一个web服务器

• 通过后端路由发送给前端的html文件

• 在其html文件的内部的文字前端可以直接接收并且显示在浏览器页面上

• 但是img js文件 这种需要在html文件中引路径的文件 需要在路由中再发送img js的绝对路径给前端

• 再从第一次发送的html文件中引用后端路由发送的路径 才能引用到img js

过程很麻烦 每次发送图片 都要在后端路由引路径给前端

单页面代码

//单页面操作

const http = require( 'http' );

const fs = require( 'fs' );

const host = 'localhost';

const port = 8000;

http
    .createServer( ( request,response ) => {
    
    res.writeHead( 200,{
        'Content-Type' : 'text/html;charset=utf8'
    })
    
    //http://localhost:5000/shopcar    
    //http: 协议 ;  localhost: 域名 ; 5000: 端口 ; /shopcar: 路径 ;
    
    //req.url 表示的是路径信息 
    
    switch( req.url ){
        case '/home': //其中的一个页面
            res.write( 'home' )
            res.end()
            break;
        case '/index':
            fs.readFile('./static/shopcar.html', 'utf8', ( error,docs ) => {
                res.write( docs )
                res.end()
            })
            break;
        case '/1.jpg': //图片的路径
            fs.readFile('./static/1.jpg', ( error,docs ) => {
                res.write( docs,'binary' )
                res.end()
            })
            break;
    }
    })
    .listen( port,host,() => {
        console.log( `The server is running at : http://${ host }:${ port }` )
    })

npm脚本 npm scripts

概念

npm脚本指的是 package.json 中的 scripts 字段

认识 package.json

• package.json 是记录项目依赖包信息和 npm 脚本命令的一个配置文件
  • 项目依赖包信息：
    • dependencies 生产环境的依赖包
    • devDependencies 开发环境使用的依赖包
• 脚本命令：
  • 写在 package.json 文件中的 scripts 行的命令 ( 在命令行执行的脚本命令 )
  • 格式 ‘dev’ : ‘命令’
  • & vs &&
  • 举例：
    • npm run dev & npm run app 全部执行完命令， 最后输出结果
    • npm run dev && npm run app 依次执行 并且依次输出结果

前端异步流程工具

为什么要进行异步操作？

• JavaScript是单线程，依次执行任务，要想让任务能够顺利进行，我们需要排队
• 异步就是将任务放入异步队列，在主线程执行结束之后再去执行

前端异步的操作方式

传统方式

• 回调函数
• 事件

前端异步流程工具 【 封装出来的函数 ，库 】

es6 Promise

const p1 = new Promise( ( resolve,reject ) => {
    resolve( '任务一' )
}).then( ( data ) => {
    console.log( data )
}).catch( ( error ) => {
    if( error ) throw error //与console.log抛错不同 该抛错会使进程中断 
})

const p2 = new Promise( ( resolve,reject ) => {
    resolve( '任务二' )
}).then( ( data ) => {
    console.log( data )
}).catch( ( error ) => {
    if( error ) throw error
})

//Promise.all( [ p1,p2 ] )  一次执行任务，即使有要是任务，也必须等待延时任务结束，后续任务才能进行

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

//在nodejs中输出结果：
                主线程
                任务一
                任务二
                任务三

//Promise.race( [ p1,p2 ] )  异步队列中，任务快的先进行( 未设置延时的任务 ),其他设置了延时的任务后续进行

Promise
       .race( [ p1,p2 ] )
       .then( () => {
           console.log( '任务三' )
       })

//如果哪一个任务设置了延时 其他没有设置延时的任务就会比它快执行

console.log( '主线程' )

es6 Generator函数

• Generator生成器函数
  • function 关键字后面跟一个 * 来定义一个generator函数
  • 使用yield关键字来定义任务

function* p1 () {
    //yield任务
    yield '任务一'
    yield '任务二'
    yield '任务三'
    yield '任务四'
    yield '任务五'
    return '任务六'
}

ocnst task = p1()

console.log ( task.next() ) //通过next方法来遍历执行任务
console.log ( task.next() ) //通过next方法来遍历执行任务
console.log ( task.next() ) //通过next方法来遍历执行任务
console.log ( task.next() ) //通过next方法来遍历执行任务
console.log ( task.next() ) //通过next方法来遍历执行任务
console.log ( task.next() ) //通过next方法来遍历执行任务

以上代码的执行结果

• value 表示任务执行的结果
• done 表示总任务执行状态

//有return值的运行结果
{ value: '任务一', done: false }
{ value: '任务二', done: false }
{ value: '任务三', done: false }
{ value: '任务四', done: false }
{ value: '任务五', done: false }
{ value: '任务六', done: true }

//没有return值的运行结果
{ value: '任务一', done: false }
{ value: '任务二', done: false }
{ value: '任务三', done: false }
{ value: '任务四', done: false }
{ value: '任务五', done: false }
{ value: undefined, done: true }

es6 - es8 async函数 ( 它就是Generator函数的语法糖 )

• 里层请求数据结果返回到外层使用
• async 函数是 generator 函数 + spawn 自动执行器函数的封装

async function p1 () {
    const result = await '任务一'
    return result
}

const p2 = async function () {
    const result = await '任务二'
}

const p3 = async () => {
    const result = await '任务三'
    return result
}

console.log ( '主线程' )


console.log( p1() )
console.log( p2() )
console.log( p3() )

//代码结果
Promise { <pending> }
Promise { <pending> }
Promise { <pending> }
主线程

console.log ( p1().then( res => console.log( res )))
console.log ( p2().then( res => console.log( res )))
console.log ( p3().then( res => console.log( res )))

//代码结果
Promise { <pending> }
Promise { <pending> }
Promise { <pending> }
主线程
任务一
任务二
任务三

Node中的异步处理工具: nextTick setImmediate

• nodejs中的异步流程工具
• js的全局变量是 window
• Nodejs的全局变量是 global

两者的区别

• 轮询

  • nodejs是事件驱动的，有一个循环线程一直从事件队列中取任务执行或着I/O的操作转给后台线程池来操作，把这个循环线程的每次执行的过程算是一次轮询。
  • 举例
  1. 把一个36次的任务 分成6轮 每次执行6次。
  2. Process.nextTick() 是在每次事件轮询之前执行的 即6次中的第一次
  3. setImmediate() 则是在事件轮询之后执行的，即6次中的第六次，为了防止轮询阻塞，每次只会调用一个
  4. 中间的四次都是回调函数

• nextTick() 的回调函数执行的优先级要高于setImmediate()

process.nextTick( () => {
    console.log( 'A' )
})

setImmediate( () => {
    console.log( 'B' )
})

process.nextTick( () => {
    console.log( 'C' )
})

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

//运行结果

主线程任务
A
B
C

async库----使用前先下载第三库 async

//const { series,parallel } = require( 'async' ) //引用async模块

• 多任务执行

• series 串行
  - series( [ 任务一,任务二 ],callback )
  - 串行: 表示两个任务在一个任务线上，任意一个任务崩溃 ，其与任务全部无法执行

series( [ 
    function( callback ) {
        setTimeout( () => {
            callback( null,'任务一' )
        },4000 )
    },
    function( callback ) {
        setTimeout( () => {
            callback( null,'任务二' )
        },2000)
    }],function( error,result ){
        console.log( '任务六' )
        console.log( result )
    })
    //因为是串行  总耗时6000毫秒

• parallel 并行

parallel( [
    function( callback ){
        setTimeout( () => {
            callback( null,'任务三' )
        },4000)
    },
    function( callback ){
        setTimeout( () => {
            callback( null,'任务四' )
        },2000)  
    }
],function( error,result ){
    console.log( '任务五' )
    console.log( result )
})

//因为是并行 耗时4000毫秒

console.log( '主线程' )

setTimeout( () => {
callback( null,‘任务三’ )
},4000)
},
function( callback ){
setTimeout( () => {
callback( null,‘任务四’ )
},2000)
}
],function( error,result ){
console.log( ‘任务五’ )
console.log( result )
})

//因为是并行 耗时4000毫秒

console.log( ‘主线程’ )