写在开头

一点题外话

其实最近在不断的更新Java的知识,从基础到进阶,以及计算机基础、网络、WEB、数据库、数据结构、Linux、分布式等等内容,预期写成一个既可以学习提升又可以面试找工作的《Java成长之路》!算是对自己学习的总结(笔记),也算是一种程序猿的记忆,现在大环境那么差,万一哪天转行了,还能当做一种记忆。

以往的博客都是按照知识点的顺序发的,但今天一个大一的粉丝私信问JS异步编程内容,决定先理一理这块内容,想着后面如果还是有类似的咨询,则会破坏原有发文顺序,进行交叉更新,最后,会将所有内容汇总成PDF,发给需要的朋友哈。

回到话题

ok,那我们现在就一起来学习一下JS的异步编程吧,异步的诞生是因为同步带来的诸多不便,我们都知道JavaScript是单线程时间循环模型,同步如同流水线,一步步的往下走中间有步骤失败,下面的功能就无法进行,这显然不是我们想要的。我们想要的是,一个程序在执行的过程中,我们可以去干其他的,不需要等待它的完成再往下执行,这就是异步

异步编程

什么是异步编程?刚刚的大白话已经点名,为了能更直观的感受,我们看下面这段代码:

【代码示例1】

const i = 'HelloWord';
setTimeout(() => {
console.log('JavaBuild')
}, 2000);
console.log(i)

我们上面说了JS是单线程的,在这个主线程中,我们通过setTimeout()这个回调函数,实现了异步。控制台运行的时候我们就会发现,HelloWord先打印,等2秒后打印JavaBuild。

这种通过简单的回调函数实现异步,在复杂的代码逻辑中,多个异步操作时会带来“回调地狱”,因此同样不常用。

Promise

为了优化(注意是优化,并不是彻底解决回调地狱)多层嵌套的异步调用,Promise(承诺)应运而生。

Promise 对象表示异步操作最终的完成(或失败)以及其结果值。

一个 Promise 是一个代理,它代表一个在创建 promise 时不一定已知的值。它允许你将处理程序与异步操作的最终成功值或失败原因关联起来。这使得异步方法可以像同步方法一样返回值:异步方法不会立即返回最终值,而是返回一个 promise,以便在将来的某个时间点提供该值

通过Promise我们可以实现相同的效果

【代码示例2】

new Promise((resolveOuter) => {
resolveOuter(
new Promise((resolveInner) => {
setTimeout (() => {
console.log("resolveInner");
}, 1000 ); }),
);
console.log('resolveOuter')
});

此 Promise 在创建时已经被解决(因为 resolveOuter 是同步调用的),但它是用另一个 Promise 解决的,因此在内部 Promise 兑现的 1 秒之后才会被兑现。

Promise的链式调用

Promise.prototype.then()、Promise.prototype.catch() 和 Promise.prototype.finally() 方法用于将进一步的操作与已敲定的 Promise 相关联。由于这些方法返回 Promise,因此它们可以被链式调用。

【代码示例3】

const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("JavaBuild");
}, 300);
}); myPromise
.then(handleFulfilledA)
.then(handleFulfilledB)
.then(handleFulfilledC)
.catch(handleRejectedAny);

关于Promise相关的详细内容这里不再赘述了,因为真实的使用中,我们一般也不会这样写,感兴趣的同学,可以看这篇文章一文看懂Promise

async / await

在ES8语法中带来了两个新词asyncawait,进一步的通过异步函数实现异步操作,并将Promise(期约)应用于JavaScript函数的结果。

async关键字用于声明异步函数,它可以在函数声明,函数表达式还有箭头函数上使用,使用async关键字可以让函数具有异步特征,在实际中它需要和await配合使用。

【代码示例4】

    async function msg(){}
let jackson = async function(){}
let jackson = async ()=>{}

一旦定义了一个函数作为一个异步函数,我们就可以使用 await 关键词。这个关键词放在回调的Promise之前,将会暂停执行函数,直到Promise执行或拒绝。

【代码示例5】

 async function msg(){
let p = new Promise((resolve,reject)=>setTimeout(resolve,1000,'JavaBuild'));
console.log(await p);
}
msg();

await关键字其实很简单,js运行在碰到await关键字时,会记录在哪里暂停执行。等到await右边的值可以使用了,就是处理完回调了,js会向消息列对中推送一个任务,这个任务会恢复异步函数的执行。这样的话,即使await后面跟着一个立即可用的值,函数的其余部分也会被异步求值。

【代码示例6】

    async function fun01(){
console.log(await Promise.resolve('第一名'));
}
async function fun02(){
console.log(await '第二名');
}
async function fun03(){
console.log('第三名');
}
fun01();
fun02();
fun03();

大家猜一猜最终打印出来的结果顺序是啥?

//因为await原因,fun01,fun02进入暂停队列,fun03先执行,返回已解决(已敲定)的Promise后,进入fun01,执行返回后,在进入fun02。
第三名
第一名
第二名

ok,以上就是简单的JS异步编程啦!

结尾彩蛋

如果本篇博客对您有一定的帮助,大家记得留言+点赞+收藏呀。原创不易,转载请联系Build哥!

Promise, async, await实现异步编程,代码详解的更多相关文章

  1. [.NET] 利用 async & await 的异步编程

    利用 async & await 的异步编程 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/5922573.html  目录 异步编程的简介 异 ...

  2. Atitit. Async await 优缺点 异步编程的原理and实现 java c# php

    Atitit. Async await 优缺点 异步编程的原理and实现 java c# php 1. async & await的来源1 2. 异步编程history1 2.1. 线程池 2 ...

  3. 利用 async & await 的异步编程

    走进异步编程的世界 - 开始接触 async/await 利用 async & await 的异步编程 async 的三大返回类型 公司技术需求备忘录

  4. php为什么需要异步编程?php异步编程的详解(附示例)

    本篇文章给大家带来的内容是关于php为什么需要异步编程?php异步编程的详解(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 我对 php 异步的知识还比较混乱,写这篇是为了 ...

  5. 用 Python 3 的 async / await 做异步编程

    前年我曾写过一篇<初探 Python 3 的异步 IO 编程>,当时只是初步接触了一下 yield from 语法和 asyncio 标准库.前些日子我在 V2EX 看到一篇<为什么 ...

  6. 使用 async/ await 进行 异步 编程

    一.异步函数 异步函数概念. 通常 是 指用 async 修饰 符 声明 的, 可 包含 await 表达式 的 方法 或 匿名 函数 1. 从 语言 的 视角 来看, 这些 await 表达式 正是 ...

  7. C# Socket-TCP异步编程原理详解附源码

    目录 目录异步原理主要方法源码Server源码:Client源码实验效果(广播为例)参考博客 TOC 异步原理 套接字编程原理:延续文件作用思想,打开-读写-关闭的模式. C/S编程模式如下: Ø 服 ...

  8. [.NET] 利用 async & await 进行异步 IO 操作

    利用 async & await 进行异步 IO 操作 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/6082673.html  序 上次,博主 ...

  9. 使用 Async 和 Await 的异步编程(C# 和 Visual Basic)[msdn.microsoft.com]

    看到Microsoft官方一篇关于异步编程的文章,感觉挺好,不敢独享,分享给大家. 原文地址:https://msdn.microsoft.com/zh-cn/library/hh191443.asp ...

  10. 【转】【C#】C# 5.0 新特性——Async和Await使异步编程更简单

    一.引言 在之前的C#基础知识系列文章中只介绍了从C#1.0到C#4.0中主要的特性,然而.NET 4.5 的推出,对于C#又有了新特性的增加--就是C#5.0中async和await两个关键字,这两 ...

随机推荐

  1. Android 多语言动态更新方案探索

    本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/jG8rAjQ8QAOmViiQ33SuEg作者:陈龙 最近做的项目需要支持几十种语言,很多小 ...

  2. 技术文档丨 OpenSCA技术原理之npm依赖解析

    本文主要介绍基于npm包管理器的组件成分解析原理. npm介绍 npm(全称Node Package Manager)是Node.js标准的软件包管理器. npm的依赖管理文件是package.jso ...

  3. [Qt开发/毕业设计/求职项目]局域网环境下远程文件发送部署系统-服务端、客户端双端的讲解

    写在前面 本文旨在做一个简单的代码讲解,我会给出源码,然后整个代码的讲解都在源码的基础上进行. 代码可能会随着更新而进行修改,但是整体框架变化不会太大. 整个文章内容不会太多,算是我自己的一个复盘,整 ...

  4. yakit的web fuzzer功能的使用

    问题 yakit没有Burp 的 Intruder 爆破模块,那么yakit该怎么进行参数爆破?yakit参数爆破的方式与burp有什么区别? 前言 手工测试场景中需要渗透人员对报文进行反复的发送畸形 ...

  5. java基础(4)--javadoc文档与命令

    一.Javadoc文档 javadoc是Sun公司提供的一个技术,它从程序源代码中抽取类.方法.成员等注释形成一个和源代码配套的API帮助文档.也就是说,只要在编写程序时以一套特定的标签作注释,在程序 ...

  6. 基于python+django的求职招聘网站-网上招聘管理系统设计与实现

    该系统是基于python+django的求职招聘网站.网上招聘管理系统.网上人才招聘系统.毕业生求职招聘系统.大学生求职招聘系统.校园招聘系统.企业招聘系统.系统适合场景:大学生.课程作业.毕业设计. ...

  7. 结构体中ElementType的使用

    1.问题 在定义结构体时,对于元素值,为什么喜欢使用ElementType而不是直接使用int或者char等等? 2.结论 对于int get_result(int x); 和 int get_res ...

  8. Data truncated for column '字段名' at row 1 的解决方法

    1.原因: 修改表结构 XXX 为 not null 时,表数据  XXX 字 段 存在 null 值. 2.解决: 去掉或修改 带有 null 值 的 ( 需要设置 not null 的) 字段

  9. SpringBoot利用自定义注解实现多数据源

    自定义多数据源 SpringBoot利用自定义注解实现多数据源,前置知识:注解.Aop.SpringBoot整合Mybaits 1.搭建工程 创建一个SpringBoot工程,并引入依赖 <de ...

  10. Docker-01基本命令

    1.Docker安装 系统镜像为Centos7.x yum包更新到最新 sudo yum update 安装需要的软件包,yum-util提供yum-config-manager功能.另外两个是dev ...