javascript异步编程,promise概念
javascript 异步编程
概述
- 采用单线程模式工作的原因: 避免多线dom操作同步问题,javascript的执行环境中负责执行代码的线程只有一个
内容概要
- 同步模式和异步模式
- 事件循环和消息队列
- 异步编程的几种方式
- Promise 异步方案、宏任务/微任务队列
- Generator异步方案、async/await语法糖
同步模式(synchronous)
- 复杂运算耗时较多时阻塞后面代码执行
异步模式()
- 耗时任务用异步模式去处理 用回调函数
- 代码执行顺序混乱
- 异步同步说的是执行代码的线程是单线程
console.log('global begin')
setTimeout(function timer1 () {
console.log('timer1 invoke')
}, 1800)
setTimeout(function timer2 () {
console.log('timer2 invoke')
setTimeout(function inner () {
console.log('inner invoke')
}, 1000)
}, 1000)
console.log('global end')
回调函数
- 所有异步编程方案的根基
promise概述
- promise 是 es6 提出的一个异步解决方案,比传统回调事件的写法更加合理更加强大,主要还是优雅
- promise 有 pending(等待中),fulfilled(已成功),rejected(已失败),只有异步操作的结果才能够将状态改变,且只会有 pending->fulfilled 或者 pending->rejected,只要状态改变,会一直保持这个结果
- promise的回调函数都会被挂入到回调队列中
- then方法会返回一个全新的promise对象
- 每一个then方法都是在为上一个then返回的promise添加状态
- 前面then方法中的回调函数的返回值都会作为后面then方法的参数
- 如果回调函数返回的是promise,那么后面then方法的回调会等待她的结束
const p = new Promise((resolve, reject) => {
if (true) {
resolve("成功"); //将状态由pending->fulfilled
} else {
reject("失败"); //将状态由pending->rejected
}
});
console.log(p);
promise 基本方法
// promise 方式 ajax
function ajax(url){
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'json';
xhr.onload = function(){
if(this.status === 200){
resolve(this.response);
}else{
reject(new Error(this.statusText));
}
}
xhr.send();
})
}
ajax("./package.json").then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
ajax("./1.json").then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
promise 静态方法
- resolve 返回一个成功的promise对象
- reject 快速创建一个一定是失败的promise对象
function ajax(url){
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'json';
xhr.onload = function(){
if(this.status === 200){
resolve(this.response);
}else{
reject(new Error(this.statusText));
}
}
xhr.send();
})
}
// Promise.resolve("成功").then(res=>{
console.log(res);
});//等价于 new Promise
var promise = ajax("/aa");
var promise2 = Promise.resolve(promise)
// promise === promise2
并行执行
- all
- race
// promise 并行执行
function ajax(url){
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'json';
xhr.onload = function(){
if(this.status === 200){
resolve(this.response);
}else{
reject(new Error(this.statusText));
}
}
xhr.send();
})
}
//all 等待所有
var promiseAll = Promise.all([
ajax("./package.json"),
ajax("./package.json"),
ajax("./package.json"),
ajax("./package.json"),
ajax("./package.json"),
ajax("./package.json"),
ajax("./package.json"),
ajax("./package.json"),
ajax("./package1.json")
]).then(res=>{
console.log(res)// 所有成功才会执行
}).catch(err=>{
console.log(err);//任何一个失败都会执行
});
//race 只等待第一个结束的任务
Promise.race([
ajax("./package.json?a=1"),
ajax("./package.json?a=2"),
ajax("./package.json?a=3"),
ajax("./package.json?a=4"),
ajax("./package.json?a=5"),
ajax("./package.json?a=6"),
ajax("./package.json?a=7"),
ajax("./package.json?a=8"),
ajax("./package.json?a=9")
]).then(res=>{
console.log(res);//返回第一个成功的
}).catch(err=>{
console.log(err);//返回第一个失败的
})
执行时序
- promise 没有任何异步操作任然会执行异步回调
- promise 是微任务不会重新排队本轮调用结束的末尾去执行
- setTimeout等大多数api都是宏任务都需要重新排队
console.log("A");
setTimeout(function(){
console.log("B")
},0)
Promise.resolve().then(res=>{
console.log("C");
setTimeout(function(){
console.log("D")
},0)
})
new Promise(function(resolve,reject){
console.log("E");
resolve("ok");
}).then(res=>{
console.log("F");
});
console.log("G")
// A E G C F B D
javascript异步编程,promise概念的更多相关文章
- JavaScript异步编程的主要解决方案—对不起,我和你不在同一个频率上
众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...
- JavaScript异步编程原理
众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...
- Promises与Javascript异步编程
Promises与Javascript异步编程 转载:http://www.zawaliang.com/2013/08/399.html 在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这 ...
- 转: Promises与Javascript异步编程
在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这些年浏览器技术.HTML5以及CSS3等的发展,越来越多的富Web应用出现:在给与我们良好体验的同时,Web开发人员在背后需要处理越来越多 ...
- JavaScript异步编程
前言 如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一.如果你对异步编程没有太清晰的概念,那么我建议 ...
- 深入解析Javascript异步编程
这里深入探讨下Javascript的异步编程技术.(P.S. 本文较长,请准备好瓜子可乐 :D) 一. Javascript异步编程简介 至少在语言级别上,Javascript是单线程的,因此异步编程 ...
- JavaScript 异步编程的前世今生(上)
前言 提到 JavaScript 异步编程,很多小伙伴都很迷茫,本人花费大约一周的业余时间来对 JS 异步做一个完整的总结,和各位同学共勉共进步! 目录 part1 基础部分 什么是异步 part2 ...
- Javascript异步编程之一异步原理
本系列的例子主要针对node.js环境,但浏览器端的原理应该也是类似的. 本人也是Javascript新手,把自己这段时间学习积累的要点总结下来,希望可以对同样在学习Javascript/node.j ...
- Javascript异步编程之二回调函数
上一节讲异步原理的时候基本上把回掉函数也捎带讲了一些,这节主要举几个例子来具体化一下.在开始之前,首先要明白一件事,在javascript里函数可以作为参数进行传递,这里涉及到高阶函数的概念,大家可以 ...
随机推荐
- [CSP-S 2019 day2 T1] Emiya家今天的饭
题面 题解 不考虑每种食材不超过一半的限制,答案是 减去 1 是去掉一道菜都不做的方案. 显然只可能有一种菜超过一半,于是枚举这种菜,对每个方式做背包即可(记一维状态表示这种菜比别的菜多做了多少份). ...
- Java使用定时任务详解
定时任务 目录 定时任务 SpringBoot定时任务 默认单线程 使用异步多线程 Spring定时任务XML配置(注解形式几乎同上) 使用springTask: ----springTask为spr ...
- Linux或Docker里安装minio / Docker中安装h5ai
此文为单节点搭建操作 Linux中搭建minio 对象存储服务器 下载minio安装包 wget https://dl.minio.io/server/minio/release/linux-amd6 ...
- 学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序(中)
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 四.创建一个Blazor应用程序 1. 第一种创 ...
- KingbaseESV8R6如何针对表单独设置vacuum策略
背景 书接上文 KingbaseES应对表年龄增长过快导致事务回卷 ,有些特殊业务场景不能靠全局的autovacuum方法,例如大型数据库系统,频繁做update的系统,还有上文提到的做实时数据同步的 ...
- KingbaseES R6 集群禁用 root ssh 后需要修改集群为es_server 案例
案例说明: 在生产环境下,由于安全需要,主机间不允许建立root用户的ssh信任连接,这样导致KingbaseES R6 repmgr集群,通过sys_monitor.sh脚本启动集群时,节点之间不能 ...
- Zookeeper及基于Zookeeper的分布式锁总结
1. Zookeeper ZooKeeper 内部存储的数据结构 / +-- node1 +-- node2 | +-- sub_node21 -> "I am sub_node21& ...
- 《网页设计基础——HTML常用标签》
网页设计基础--HTML常用标签 一.网页框架: 格式: <html> <head> <title>网页标题</title> <sty ...
- C# 中的那些锁,在内核态都是怎么保证同步的?
一:背景 1. 讲故事 其实这个问题是前段时间有位朋友咨询我的,由于问题说的比较泛,不便作答,但想想梳理一下还是能回答一些的,这篇就来聊一聊下面这几个锁. Interlocked AutoResetE ...
- 【全网最全】springboot整合JSR303参数校验与全局异常处理
一.前言 我们在日常开发中,避不开的就是参数校验,有人说前端不是会在表单中进行校验的吗?在后端中,我们可以直接不管前端怎么样判断过滤,我们后端都需要进行再次判断,为了安全.因为前端很容易拜托,当测试使 ...