谈谈JS异步处理(Promise、generator、async)

2023-11-20

大家都知道nodejs很快,为什么会这么快呢,原因就是node采用异步回调的方式来处理需要等待的事件,使得代码会继续往下执行不用在某个地方等待着。但是也有一个不好的地方,当我们有很多回调的时候,比如这个回调执行完需要去执行下个回调,然后接着再执行下个回调,这样就会造成层层嵌套,代码不清晰,很容易进入“回调监狱”,就容易造成下边的例子:

async(1, function(value){
 async(value, function(value){
 async(value, function(value){
  async(value, function(value){
  async(value, function(value){
   async(value, final);
  });
  });
 });
 });
});

这样的写法会让人崩溃,那么有什么办法可以解决这个问题呢,或者有其他别的写法吗?答案是有的,es6新出的promise对象已经es7的async await都可以解决这个问题。

(1)我们接下来首先谈一谈promise,下面是定义一个promise对象
let a = 1;
let promise = new Promise(function(resolve, reject){
       if(a==10){
           resolve('成功了');
       }else{
           reject('失败了');
       }
});

定义的promise对象接受成功和失败回调可以这样接收

promise.then(res=>{
      console.log(res); //成功回调
},err=>{
      console.log(err); //失败回调
})

也可以使用catch接收失败回调

promise.then(res=>{
      console.log(res); //成功回调
}).catch(err=>{ 
      console.log(err); //失败回调
})

下面是promise的一些api
1、Promise.resolve()
使用方法

let p1 = Promise.resolve('aaa');

p1.then(res=>{
      console.log(res);
})

等同于

let p1 = new Promise(resolve =>{
      resolve('aaa')
});

p1.then(res=>{
     console.log(res);
})

2、Promise.reject()
3、Promise.all() // 所有的都有完成,相当于 且
4、Promise.race() // 完成一个即可,相当于 或

(2)接下来我们来看一个使用node来异步读取文件的实例来展示
1、使用promise来实现
const fs = require('fs');

//简单封装  fs封装成一个promise
const readFile = function (fileName){
    return new Promise((resolve, reject) =>{
        fs.readFile(fileName, (err, data) =>{
            if(err) reject(err);
            resolve(data);
        });
    });
}


//promise
readFile('data/a.txt').then(res=>{
    console.log(res.toString());
    return readFile('data/b.txt');
}).then(res=>{
    console.log(res.toString());
    return readFile('data/c.txt');
}).then(res=>{
    console.log(res.toString());
})
2、使用generator来实现
const fs = require('fs');

//简单封装  fs封装成一个promise
const readFile = function (fileName){
    return new Promise((resolve, reject) =>{
        fs.readFile(fileName, (err, data) =>{
            if(err) reject(err);
            resolve(data);
        });
    });
}


//generator
function * gen(){
    yield readFile('data/a.txt');
    yield readFile('data/b.txt');
    yield readFile('data/c.txt');
}
let g1 = gen();

g1.next().value.then(res=>{
    console.log(res.toString());
    return g1.next().value;
}).then(res=>{
    console.log(res.toString());
    return g1.next().value;
}).then(res=>{
    console.log(res.toString());
})

看起来优雅了不少

3、使用async来实现
const fs = require('fs');

//简单封装  fs封装成一个promise
const readFile = function (fileName){
    return new Promise((resolve, reject) =>{
        fs.readFile(fileName, (err, data) =>{
            if(err) reject(err);
            resolve(data);
        });
    });
}


//async
async function fn(){
    let f1 = await readFile('data/a.txt');
    console.log(f1.toString());
    let f2 = await readFile('data/b.txt');
    console.log(f2.toString());
    let f3 = await readFile('data/c.txt');
    console.log(f3.toString());
    
}
fn();
4、异步的一些测试实例
(1)yield和promise共同使用
let mypromise = new Promise((resolve) => {
  resolve("123")
})
mypromise.then((d) => {
     setTimeout(() => {
         console.log('setTimeoutResult', d);
         return d;
     }, 10000)
})

let result = yield mypromise;
console.log('result', result);

打印结果
实例1

let result = yield call(testPromise);
console.log('result', result);
function testPromise() {
  return Promise.resolve("123").then(() => {
    return Promise.resolve("456")
  })
}

打印结果
实例1
上述实例改成如下

function testPromise() {
  return Promise.resolve("123").then(() => {
    return Promise.resolve("456").then(null);
  })
}

打印结果依然如此
实例1

(2)resolve返回另一个promise

下面代码中,p1是一个Promise,3秒之后变为rejected。p2的状态在1秒之后改变,resolve方法返回的是p1。由于p2返回的是另一个 Promise,导致p2自己的状态无效了,由p1的状态决定p2的状态。所以,后面的then语句都变成针对后者(p1)。又过了2秒,p1变为rejected,导致触发catch方法指定的回调函数。

var p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})

var p2 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(p1), 1000)
})

p2
  .then(result => console.log(result))
  .catch(error => console.log(error))
// Error: fail
(3)async返回一个promise
getPromise() {
    return new Promise((resolve, _reject) => {
        setTimeout(() => {
            console.log("getPromise");
            resolve("getPromiseValue")
        }, 3000);
    })
}
getPromise2() {
    return new Promise((resolve, _reject) => {
        setTimeout(() => {
            console.log("getPromise2");
            resolve("getPromiseValue2")
        }, 3000);
    })
}
async test() {
   let promise1 = await this.getPromise()
   console.log("promise1", promise1);
   setTimeout(() => {
       console.log("test");
   }, 5000);
   let promise2 = await this.getPromise2()
   console.log("promise2", promise2);
   return "test value"
}
this.test().then((val) => {
    console.log("val", val);
})

打印结果如下

(4)dva中yield理解
let test = yield put({ type: "getDingLocation", message });
test.then((val) => {
    console.log("val", val);
});
/**
 * 获取钉钉定位
 */
*getDingLocation({ message }, { put, call }) {
    try {
        let  res = { latitude: "31.178414", longitude: "121.604919", address: "上海市浦东新区荣科路" };
        yield put({ type: "input", data: { userLocation: res } });
        yield put({ type: "getTaskData", message });
        console.log("getDingLocation", res);
        return "getDingLocation";
    }
}

打印结果
在这里插入图片描述
yield返回的是一个promise,promise结果是generator函数的返回值
换一个写法

let test = yield yield put({ type: "getDingLocation", message });
// test.then((val) => {
//     console.log("val", val);
// });
console.log("test", test);

打印结果,可以看出两者结果相同
在这里插入图片描述

以上就是一些简单的理解和学习记录。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

谈谈JS异步处理(Promise、generator、async) 的相关文章

  • 为什么我的淘汰单选按钮在另一个具有点击绑定的元素内时会失败?

    我有一个单选按钮列表 我想要点击 li 他们还检查单选按钮 这一切都有效 直到我放了一个name单选元素上的属性 然后我的代码停止工作 我的代码如下所示 ul li li ul li
  • 以编程方式填写reactjs表单

    我正在编写一个用户脚本 但无法填写由reactjs制作的表单 我的代码 document querySelector id username value email protected cdn cgi l email protection
  • 如何修改每个JSON对象javascript

    我想修改里面的每个 JSON 值cooldown object cooldown user 1 This user2 0 This 在 Javascript 中使用 for 语句 我研究了好几个小时 只找到了内部的 blocks Edit
  • IE从哪个版本开始支持Object.create(null)?

    您可以通过多种方式在 JavaScript 中创建对象 creates an object which makes the Object prototype of data var data1 new Object Object liter
  • 在新的 Google 协作平台 <嵌入 HTML> 中使用 localStorage 和 IndexedDB 不起作用

    我正在尝试将新的 Google 协作平台用于我开发的网页 但是 我在存储本地数据时遇到了问题 本地文件在 Windows 和 Apple safari chrome 中运行良好 从 Google 协作平台尝试一下 没有什么乐趣 此外 在 s
  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它
  • 使用 JavaScript 禁用第三方 cookie

    我正在努力根据所有在欧盟运营的公司的数据保护规则实施新的 Cookie 政策合规性 根据该规则 用户在使用任何网站时必须能够拒绝 接受除必需的 Cookie 之外的所有内容 在我客户的网站中 我可以看到正在存储以下第三方 cookie ga
  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch
  • 引导程序提前输入未填充承诺的响应

    我的引导程序预输入如下
  • 有没有办法使用 Rspec/Capybara/Selenium 将 javascript console.errors 打印到终端?

    当我运行 rspec 时 是否可以让 capybara selenium 向 rspec 报告任何 javascript console errors 和其他异常 我有一大堆测试失败 但当我手动测试它时 我的应用程序正在运行 如果不知道仅在
  • 将 GMT 时间转换为当地时间

    我以这种格式从我的服务器获取 GMT 时间 Fri 18 Oct 2013 11 38 23 GMT 我的要求是使用Javascript将此时间转换为本地时间 例如 如果用户来自印度 首先我需要采用时区 5 30并将其添加到我的服务器时间并
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代
  • 在 Javascript 中连接空数组

    我正在浏览一些代码 我想知道这有什么用处 grid push concat row 根据我的理解 它等同于 grid push row 为什么要大惊小怪 连接 你想使用 concat当您需要展平数组并且没有由其他数组组成的数组时 例如 va
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • 从 FileReader 设置背景图像样式

    我正在寻找一种解决方案 允许我从文件上传输入中获取文件并通过设置 document body style backgroundImage 来预览它 以下代码用于在 Image 元素中显示预览 function setImage id tar
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • 深度学习03—手写数字识别实例(Tensorflow版实验)

    目录 0 实验概述 1 利用Tensorflow自动加载mnist数据集 2 手写数字识别体验 2 1 准备网络结构与优化器 2 2 计算损失函数与输出 2 3 梯度计算与优化 2 4 循环 2 5 完整代码 补充 os environ T
  • linux学习2:定时任务

    1 crontab命令 crontab e 编辑crontab定时任务 crontab l 查询定人任务 crontab r 删除当前用户所有的定时任务 1 1 每分钟将home路径下的详细信息保存到 home ls txt中 cronta
  • prometheus告警模块ALTERMANAGER中抑制规则的使用

    prometheus服务端通过配置文件可以设置告警 下面是一个告警设置的配置文件alert yml groups name goroutines monitoring rules alert TooMuchGoroutines expr g
  • 【算法】动态规划

    动态规划的定义 动态规划是运筹学的一个分支 是求解决策过程的最优化的数学方法 20世纪50年代初美国数学家R E Bellman等人在研究多阶段决策过程的优化问题时 提出了著名的最优化原理 把多阶段过程转化为一系列单阶段问题 利用各阶段之间
  • 漏洞扫描工具大全,妈妈再也不用担心我挖不到漏洞了

    1 常见漏洞扫描工具 NMAP AWVS Appscan Burpsuite x ray Goby 2 端口扫描之王NMAP Nmap是一款非常强大的实用工具 包含的功能如下 主机探测 端口扫描 服务版本扫描 主机系统指纹识别 密码破解 漏
  • 机器学习 day27(反向传播)

    1 导数 函数在某点的导数为该点处的斜率 用height width表示 可以看作若当w增加 J w b 增加k倍的 则k为该点的导数 2 反向传播 tensorflow中的计算图 由有向边和节点组成 从左向右为正向传播 神经网络模型使用正
  • 程序员的浪漫—利用Matlab 实现圣诞树动态显示

    一 前言 圣诞节是基督教纪念耶稣诞生的重要节日 亦称耶稣圣诞节 主降生节 天主教亦称耶稣圣诞瞻礼 耶稣诞生的日期 圣经 并无记载 公元336年罗马教会开始在12月25日过此节 12月25日原是罗马帝国规定的太阳神诞辰 有人认为选择这天庆祝圣
  • MES11大标准模块(ISA95)

    1 资源分配及状态管理 ResourceAllocationandStatus 该功能管理机床 工具 人员物料 其它设备以及其它生产实体 满足生产计划的要求对其所作的预定和调度 用以保证生产的正常进行 提供资源使用情况的历史记录和实时状态信
  • vue3手动封装一个点击滚动,左右切换的商品展示效果图,纯js

    展示效果 效果图如下 默认展示第一张图片 只有两边有按钮切换 也可以点击图片切换 点击的图片从第三个开始时居中显示 分析一波 从底部的第三张图片开始到末尾的第八张图片都是居中显示 点击左右要进行切换 也要居中显示 所以我在这里用的的时在X轴
  • Linux Gadget驱动分析

    以下四篇文章需要互相补充 可以理解的较为详细 http blog sina com cn s blog 1519163d30102x2le html https www cnblogs com haoxing990 p 8799133 ht
  • C++:指向类的成员的指针

    引 想必接触过C的朋友们对C语言中指针的概念已经有了深入的了解 如果初步进行了解的朋友可以看一下 C语言基础学习笔记 指针展开来讲的基本知识点包括 指针的概念 指针的定义和初始化及简单使用 指针函数和函数指针 有关指针函数和函数指针的内容上
  • matlab_数据拟合

    多项式拟合 polyfit X Y N 多项式拟合 返回降幂排列的多项式系数 polyval P xi 计算多项式的值 function example x y P polyfit x y 3 xi 0 0 2 10 yi polyval
  • 小波变换详解

    小波变换详解 1 简介 We can use the Fourier Transform to transform a signal from its time domain to its frequency domain The peak
  • 微信聊天记录导出为电脑txt文件教程

    本文的最终目的是将手机微信的聊天记录导出到电脑里 变成txt文本文件 然后对其进行分析 网上有一些工具也可以完成这个功能 但是基本都是付费的 手动操作的话 找了很多的博客 基本没有完全有效的 最终找到一篇很靠谱的教程 小米手机提取微信聊天记
  • Spark Sql之dropDuplicates去重

    文章目录 算子介绍 示例 问题 解决 dropDuplicates和distinct 参考 算子介绍 dropDuplicates去重原则 按数据行的顺序保留每行数据出现的第一条 dropDuplicates 在Spark源码里面提供了以下
  • PCL测试程序(兔子)

    程序 include
  • vue+diff:计算两个时间的差值diff方法momentjs和dayjs

    前言 在项目中计算时间的时候 会遇到一个问题 那就是日期跨天问题 我们的开始时间和结束时间拿到了毫秒 然后时间 比如 11 50 1 50 这个如果按小时来算 就没有到1天 24小时 但是他又是过了一天 所以会需要这个diff计算 具体操作
  • 在聚会中常玩数七的游戏,七的倍数和带有七的数字都不能说,比如14,27,28。请找出1~100的不能说的数字。...

    利用ES5的filter高阶函数来实现 var arr 1 2 3 4 5 6 7 17 27 21 22 28 100 r arr filter function x return x 10 7 x 7 0 alert r 7 14 17
  • 在python中创建excel文件并写入数据

    python的包xlwt和xlsxwriter都是比较方便创建excel文件并写入数据的 工具 python3 0 首先 需要安装好相应的包 pip install xlwt 或pip install xlsxwriter xlwt中 通过
  • 谈谈JS异步处理(Promise、generator、async)

    大家都知道nodejs很快 为什么会这么快呢 原因就是node采用异步回调的方式来处理需要等待的事件 使得代码会继续往下执行不用在某个地方等待着 但是也有一个不好的地方 当我们有很多回调的时候 比如这个回调执行完需要去执行下个回调 然后接着