前端异步的一些概念

如何上传自定义模块至npm?

1.首先上npm注册一个属于自己的账户
2.注册完账户以后需要通过邮箱激活npm账户，否则无法正常上传
3.在终端里切换nrm源,切换成npm源,taobao源会上传出问题
4.上传的包名称不可以和别人上传的名称一致

上传步骤
1.终端登录npm账号
npm adduser 账号

2.上传
npm publish 上传包的路径

Node.js后端路由基本原理

路由:顾名思义 路指的是url路径，由：由来， 路径的由来

在以前的项目里的页面基本上都是多页面，页面之前切换是页面的跳转，跳转的间隙会有几秒的空白等待时间。

现在流行的是单页面的切换，点击切换不会切换页面，只是内容的切换

我们这个时候会将以前的页面内容做成一个一个的模板，切换的只是内容的模板

Node.js专用模板 [ ejs pug(jade) ]

后端专用模板 [ art-template ]

npm脚本 npm scripts

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

认识package.json

• package.json 是记录项目依赖包信息和npm脚本命令的一个配置文件
  ** 项目依赖包信息;
  1.dependcies 生产环境的依赖包
  2.devDependcies 开发环境的依赖包

**脚本命令
在命令执行的脚本命令

& vs &&

举例
npm run dev & npm run app 全部执行完毕最后输出结果

npm run dev && npm run app 依次执行

前端的异步流程

1.为什么要进行异步操作？
● javascript是单线程，一次执行一个任务，要想任务能够顺利进行，我们需要排队。
● 异步就是将任务放入异步队列，在主线程执行任务结束之后再去执行
2.前端异步的操作方式
○ 传统方式
■ 回调函数
■ 事件
○ 前端异步流程工具【封装出来函数、库】
■ es6 Promise
■ es6 Generator 函数
■ es6 -es8 async函数
■ Node中异步的处理工具:nexTick SetImmadeiate
■ 第三方类库: asyc.js

Promise函数

Promise函数中有两个状态，开始到成功(resolve) 开始到失败(reject)

Promise函数中还有两个方法 all race

all是所有的promise实例都成功或者都失败才会执行,

race是任务赛跑，谁快就谁执行，不会任务堵塞

Generator生成器函数

• function 关键字后面跟一个 * 来定义一个generator函数

** 使用 yield 关键字来定义任务
function* fn(){
yield ‘任务一’;
yield ‘任务二’;
yield ‘任务三’;
}
const task=fn() //迭代器 interator对象
console.log(task.next()) //任务一 //通过next方法来遍历执行任务
console.log(task.next()) //任务二
console.log(task.next()) //任务三
{ value:’ 任务 一’ ,done: false }
value:表示任务执行的结果
done:false表示任务执行状态未完成 true表示任务执行完成

async

通过async 和 await 来定义函数
async function fn(){
const result=await ‘任务一’
return result
}
调用 console.log(fn().then ( ( res)=>{
console.log(res)
} )

如何把在外层使用内层请求结果？

return new Promise((res,rej )=>{
request( ‘xxx’,(a,b,c)=>{
resolve©
})
})

---

• const p1= ()=>{
  const result=init().then(res => console.log (res ) )
  }
  p1()
  这个是小程序数据请求封装

---

const p1=async () =>{
const result= await init()
console.log(result )
}
console.log(p1() )

这个是 vue angular react 数据请求封装

Node.js中的异步流程工具

javascript全局变量是window Node.js中全局变量是global

Node.js中的 nextTick() 和 setimmediate()

nodejs中是事件驱动的，有一个循环线程一直从事件队列中取任务执行或者I/O的操作转给后台线程池来操作,把这个循环线程的每次执行的过程算是一次轮询.

setImmediate()的使用
即时计时器立即执行工作，它是在事件轮询之后执行,为了防止轮询阻塞,每次只会调用一个。

Process.nextTick()的使用
它和setImmediate()执行的顺序不一样，它是在事件轮询之前执行，为了防止I/O饥饿，所以有一个默认process.maxTickDepth=1000来限制事件队列的每次循环可执行的nextTick()事件的数目。

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

process.nextTick()属于idle观察者,setImmediate()属于check观察者.在每一轮循环检查中,idle观察者先于I/O观察者,I/O观察者先于check观察者.

async.js 里的两个方法(第三方库)

series 表示串行

series([任务一,任务二 ], call back )

串行：表示两个任务在一个任务线上，任意一个任务崩溃，其余任务全部无法执行

parallel 表示并行

parallel ([任务一,任务二 ], call back )

并行：每个任务都在自己的任务线上，互不影响