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里函数可以作为参数进行传递,这里涉及到高阶函数的概念,大家可以 ...
随机推荐
- 盘点Vue2和Vue3的10种组件通信方式(值得收藏)
Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异:本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式.其中将要实现的通信 ...
- C++ 炼气期之结构体
1. 前言 随着计算机向着不同领域的延伸,数据的概念已经不仅局限于数值型数据,计算机需要处理大量的非数值.且复杂的类型数据. 为了能抽象地描述这些非数值.复杂类型的数据,C++引入了复合数据类型的概念 ...
- (已解决)Adobe Creative Cloud 安装 Acrobat PDF 报错 DW071 DW003
今天安装 Adobe Acrobat pdf 阅读器报错了,错误为 Exit Code: 7 Please see specific errors below for troubleshooting. ...
- CF1442D Sum (动态规划,线段树分治)
( 宋 体 字 看 起 来 真 舒 服 ) _{_{(宋体字看起来真舒服)}} (宋体字看起来真舒服) 题 面 ( 洛 谷 翻 译 ) 题面_{_{(洛谷翻译)}} 题面(洛谷翻译) 给定 n ...
- 解决:Error downloading packages: containerd.io-1.6.4-3.1.el7.x86_64: [Errno 256] No more mirrors to try.
问题描述: 今天在安装Docker-ce的时候,安装了半天最后提示下载出错还提示下载速度太慢. 报错如下: 下载软件包时出错:containerd.io-1.6.4-3.1.el7.x86_64:[E ...
- Swagger以及knife4j的基本使用
Swagger以及knife4j基本使用 目录 Swagger以及knife4j基本使用 Swagger 介绍: Restful 面向资源 SpringBoot使用swagger Knife4j -- ...
- 璞华PLM为全场景产品生命周期管理赋能,助力产品主线的企业数字化转型
英文版的<产品生命周期管理(PLM)软件市场--增长.趋势.COVID-19影响和预测(2022 - 2027)>中对未来PLM市场概述的描述为:"产品生命周期管理(PLM)软件 ...
- 亚马逊云科技现身世界人工智能大会,揭示AI最新技术趋势
2022世界人工智能大会(WAIC)于日前落幕.经过过去四届的发展与沉淀,今天的世界人工智能大会已成为人工智能领域最有影响力的国际盛会之一,今年大咖云集.国际大厂扎堆,充分彰显了大会的国际影响力和磁力 ...
- Kubernetes DevOps: Gitlab
Gitlab 官方提供了 Helm 的方式在 Kubernetes 集群中来快速安装,但是在使用的过程中发现 Helm 提供的 Chart 包中有很多其他额外的配置,所以我们这里使用自定义的方式来安装 ...
- 重要参考步骤---ProxySQL Cluster 集群搭建步骤
环境 proxysql-1:192.168.20.202 proxysql-2:192.168.20.203 均采用yum方式安装 # cat <<EOF | tee /etc/yum.r ...