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概念的更多相关文章

  1. JavaScript异步编程的主要解决方案—对不起,我和你不在同一个频率上

    众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...

  2. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

  3. Promises与Javascript异步编程

    Promises与Javascript异步编程 转载:http://www.zawaliang.com/2013/08/399.html 在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这 ...

  4. 转: Promises与Javascript异步编程

    在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这些年浏览器技术.HTML5以及CSS3等的发展,越来越多的富Web应用出现:在给与我们良好体验的同时,Web开发人员在背后需要处理越来越多 ...

  5. JavaScript异步编程

    前言 如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一.如果你对异步编程没有太清晰的概念,那么我建议 ...

  6. 深入解析Javascript异步编程

    这里深入探讨下Javascript的异步编程技术.(P.S. 本文较长,请准备好瓜子可乐 :D) 一. Javascript异步编程简介 至少在语言级别上,Javascript是单线程的,因此异步编程 ...

  7. JavaScript 异步编程的前世今生(上)

    前言 提到 JavaScript 异步编程,很多小伙伴都很迷茫,本人花费大约一周的业余时间来对 JS 异步做一个完整的总结,和各位同学共勉共进步! 目录 part1 基础部分 什么是异步 part2 ...

  8. Javascript异步编程之一异步原理

    本系列的例子主要针对node.js环境,但浏览器端的原理应该也是类似的. 本人也是Javascript新手,把自己这段时间学习积累的要点总结下来,希望可以对同样在学习Javascript/node.j ...

  9. Javascript异步编程之二回调函数

    上一节讲异步原理的时候基本上把回掉函数也捎带讲了一些,这节主要举几个例子来具体化一下.在开始之前,首先要明白一件事,在javascript里函数可以作为参数进行传递,这里涉及到高阶函数的概念,大家可以 ...

随机推荐

  1. Excel 运算符(三):文本连接符

    文本连接符&用来合并文本串.比如,连接"计算机"和"基础"两个文本串:"计算机基础"&"基础",最终结果 ...

  2. C# for循环创建多线程

    这里仅讨论Task多线程编程,不讨论其他可以使用多线程的情况,比如Beginxxx,Thread等 一般情况下,如果有多个线程需要同是启动,且每个线程中使用了集合collection中的序号. 比如参 ...

  3. Linux安装GCC编译器

    今天突然想到怎么样在Red Hat 8上练习C,安装GCC编译器,并运行出"hello world". 于是就有了以下操作 1 [root@localhost ~]# yum in ...

  4. 第十四章 二进制部署k8s集群的平滑升级

    1.软件包下载 去github上下载较新的Kubernetes软件包https://github.com/ 2.升级说明 升级包括master节点升级和node节点的升级,本章升级至v1.15.12: ...

  5. e1000e网卡驱动在麒麟3.2.5上编译安装

    一.清空原驱动 因为系统安装完毕后系统中自带了e1000e的网卡驱动,会影响后面自行编译的驱动 所以先用find命令找出并删除掉所有关于e1000e的驱动文件 find / -name "* ...

  6. 为开源提 PR

    PR 可让你在 GitHub 上向他人告知你已经推送到存储库中分支的更改. 在 PR 打开后,你可以与协作者讨论并审查潜在更改,在更改合并到基本分支之前添加跟进提交. 为什么 PR 使用 PR 的主要 ...

  7. 最新一线大厂Redis使用21条军规及详细解读

    说明:个人原创,本人在一线互联网大厂维护着几千套集群,关于redis使用的一些坑进行了经验总结,希望能给大家带来一些帮助 适用场景:并发量大.访问量大的业务 规范:介绍军规内容 解读:讲解军规设置原因 ...

  8. 算法:Manacher,给定一个字符串str,返回str中最长回文子串的长度。

    [题目] 给定一个字符串str,返回str中最长回文子串的长度 [举例] str="123", 1 str="abc1234321ab" 7 [暴力破解] 从左 ...

  9. filebeat读取超链接日志 symlinks

    filebeat读取超链接日志文件,还需要增加配置上额外的参数:symlinks: true 符号链接选项允许Filebeat除常规文件外,可以收集符号链接.收集符号链接时,即使报告了符号链接的路径, ...

  10. Python微服务实战

    文档地址:https://www.qikqiak.com/tdd-book/ GitHub地址:https://github.com/cnych/flask-microservices-users 源 ...