node.js-4

自作多情 提交于 2019-12-18 03:27:34

前段异步流程工具

1.promise

2.Generator函数

3.Async函数

4.Node.js提供的 nextTick

5.第三方的async.js

async.js

1.async函数式是由es6提供的

2.async函数的底层其实就是generator函数

3.async函数需要和关键字 await搭配使用

4.async也是promise,也可以调用.then

格式:

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


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

const asyncFn = async () => {
//   const request = await '任务一'
//   console.log(' 任务2 ')
//   console.log( request )

// }

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

注意:只有await后面的任务顺利执行完成,那么下面的人物才会去执行,如果await后面的任务执行不顺利,那么下面的任务就会执行不顺利

使用场景:先进行数据请求,得到数据后,然后再去操作这个数据,我们的async就是首选

4.async也是promise,也可以调用.then

Node.js提供的两个方法

  1. nextTick
  2. setimmediate

  3. 总结:
    nextTick()的回调函数执行的优先级要高于setImmediate();

    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 )

例:

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( '主线程任务' )

执行顺序

  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('主线程任务')
    //主线程任务  A  C  D  B  E  F  G

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

  1. ajax
  2. fetch

gulp 4.x

  • 多任务执行
  1. 串行 :series
  2. 并行: parallel
  3. 串行格式:
格式:
async.series({ 任务名称: 任务值 },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 )
})

4.并行格式:

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


例:
var async = require( 'async' )
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' )
})

前端渲染 vs 后端渲染

  1. 前端渲染是通过ajax请求数据,然后通过js语法将数据展示到页面中,称之为前端渲染
  2. 后端渲染是通过后端语言 + 后端模板( ejs ) 将 页面整个发送给前端
    1. 后端模板
      1. ejs
      2. pug( jade )
      3. art-template

现在流行的: 前端渲染

  • 问题: 当前后端同时进行项目开发是, 后端数据接口没有写好,但是前端却需要这个接口,这个时候怎么办?
  • 分析: 需要一段数据
  • 解决: 模拟假数据( mock数据 json-server / mock.js )

以上这种形式叫做 : 前后端架构分离

很久以前,没有前端岗位的, 所有的网页都需要后端完成, 那个时候的情况我们称之为: 前后端耦合

  1. Node.js做项目的时候 ,就有两种选择了
    1. 前后端分离 :后端提供接口,前端渲染
    2. 前后端耦合: 后端渲染
  2. 直接借助一个工具来搭建一个Node.js项目,这个工具叫做 express-generator ,这个工具帮助我们实现了express框架

  3. 创建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. 研究项目代码
      • 入口文件

express 中间件 (Middleware):

中间件是一个函数,函数中参数有三个:

  1. request 请求
  2. response 响应
  3. next 请求和响应中间的循环流程

中间件有三种类型

  1. 应用级中间件
  2. 路由中间件
  3. 错误处理中间件

前端的请求方式有几种?

  1. get
  2. post
  3. put
  4. delete
  5. head
  6. all

以上的请求方式统称为: restful api

restful是一个规则,这个规则规定了数据接口的使用原则

举例:

想: 如果能有一个接口来表示不同的请求功能,那会怎么样呢?

解决: restful api 这个规则
http://localhost:300/shopcar

  • get
  • post
  • put
  • delete

    入口文件 :

例:
// 引入项目所需要的第三方包
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

// 引入项目路由配置文件
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

// 创建app对象
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// 应用级中间件

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// 路由级中间件

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});


// 错误处理中间件
// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!