前端异步的一些概念

如何上传自定义模块至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 )

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

<think>我们正在讨论前端开发中的同步与异步概念。根据引用[1]和引用[2],同步操作会阻塞后续代码的执行,而异步操作不会阻塞,允许后续代码继续执行。引用[2]还提到,异步操作通常用于网络请求、定时器等需要等待的操作,而同步操作用于简单计算。引用[3]则展示了使用async/await处理异步任务的示例。为了清晰说明,我将按照以下结构组织回答:1.基本概念:分别解释同步和异步。2.区别:对比两者的执行顺序、阻塞性、使用场景和代码复杂性。3.示例:提供同步和异步的代码示例,并解释执行过程。4.补充:简要说明JavaScript的异步机制(事件循环)。注意:由于要求使用中文回答,且数学表达式使用$...$,但本问题不涉及数学公式,因此主要使用文字描述。另外,根据指令,需要在回答末尾生成相关问题。</think>### 前端开发中的同步与异步概念解析 #### 一、基本概念 1. **同步(Synchronous)** 代码逐行顺序执行,必须等待当前任务**完全完成**后才能执行下一个任务。例如: ```javascript console.log("任务1"); // 必须执行完 console.log("任务2"); // 才能执行 ``` 执行流程:任务1 → 等待完成 → 任务2 → 等待完成 → ... [^1] 2. **异步(Asynchronous)** 不等待当前任务完成,直接执行后续代码。任务完成后通过**回调函数/Promise**通知结果。例如: ```javascript setTimeout(() => console.log("异步任务"), 1000); // 不阻塞后续执行 console.log("继续执行"); ``` 输出顺序:`继续执行` → (1秒后)`异步任务` [^2] #### 二、核心区别 | 特性 | 同步 | 异步 | |--------------|--------------------------|-------------------------------| | **执行顺序** | 顺序执行,严格依赖前任务 | 后续代码立即执行,不等待 | | **阻塞性** | 阻塞主线程,可能导致卡顿 | 非阻塞,保持界面响应 | | **使用场景** | 简单计算、即时操作 | 网络请求、文件读写、定时操作 | | **代码复杂度**| 简单直观 | 需处理回调/Promise/async-await| #### 三、典型示例 1. **同步阻塞示例** 点击按钮时界面冻结: ```javascript button.addEventListener('click', () => { for(let i=0; i<1000000000; i++){} // 同步阻塞 showResult(); // 长时间等待后才能执行 }); ``` 2. **异步解决方案** **回调函数**: ```javascript fetch('/api/data').then(response => { console.log("获取数据成功"); }); // 不阻塞后续渲染 ``` **async/await**: ```javascript async function loadData() { const data = await fetch('/api/data'); // 异步等待但不阻塞主线程 render(data); } [^3] ``` #### 四、底层机制:事件循环(Event Loop) JavaScript通过**事件循环**实现异步: 1. 同步任务进入主线程执行 2. 异步任务交给Web API(如setTimeout/fetch) 3. 完成后回调函数推入**任务队列** 4. 主线程空闲时从队列中取出回调执行 ![事件循环示意图](https://example.com/event-loop.png) *(简言之:同步优先,异步回调后补位)* [^2] > **关键结论**:异步通过非阻塞执行优化用户体验,尤其在网络请求等I/O操作中避免界面卡顿,是现代Web应用流畅性的基石。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值