谈谈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) 的相关文章

  • Vue.js + Element UI:在更改时获取“event.target”

    我无法获取在事件处理程序中触发事件的 html 字段 在 javascript 中是event target 我有一个表格 附加到更改事件函数的输入元素 管理更改事件的函数 我的代码如下 var Main methods change pa
  • Socket.io 如何判断某人何时离开

    我正在使用 socket io 创建一个实时游戏 目前 当有人离开时 什么也不会发生 我想以某种方式通知服务器说谁离开了 有没有办法在用户离开时发出正确的信息 我可以让服务器每 1000 毫秒对每个人执行一次 ping 操作 或者通过其他方
  • Chart.js 渲染垂直堆积条形图太慢

    我正在使用 Chart js API 渲染多个堆叠的垂直条形图 但性能很慢 我什至做了一些改变 这样所有的content对象已经由服务器而不是浏览器处理 但我意识到大部分时间来自最终函数new Chart overallStatsChart
  • 如何在 Ionic 2 中动态创建具有特定类的模式?

    嗨 我已经被一个问题困扰好几天了 到目前为止还没有研究证明足够 我正在尝试在 Ionic 2 中创建一个具有特定类 或 id 的简单模式 我需要这样简单的东西
  • 检测 JavaScript 版本

    如何检测浏览器支持的 JavaScript 版本 如果有 我想检查 ECMAScript 3 ECMAScript 5 和 ECMAScript 6 注意 我想避免已弃用的language tag 这里有一个很好的参考给你 http www
  • Android键盘点击搜索输入时出现和消失

    我在用谷歌地图 Js API当我搜索一个地方时 我的输入搜索栏工作正常 当我通过 iPhone 设备使用它时 它也工作得很好 但是当我通过Android 设备然后键盘立即出现和消失 我已经找到了一些关于当我按下搜索栏时 android 键盘
  • 在 angularJS 中覆盖模块值/常量的最佳方法

    我用 angularJS 编写了一个模块 封装了所有后端通信 为了获得更大的灵活性 我将 api 前缀作为模块上的常量值 可能是值 因为我没有在配置阶段使用它 所以像 angular module myapp data constant a
  • 为 Promise 编写循环的正确方法。

    如何正确构造循环以确保满足以下条件承诺电话和被束缚的记录器 log res 通过迭代同步运行 蓝鸟 db getUser email then function res logger log res this is a promise 我尝
  • .then(functionReference) 和 .then(function(value){return functionReference(value)}) 之间有区别吗?

    给定一个用于处理的命名函数Promise value function handlePromise data do stuff with data return data a 传递命名函数handlePromise作为参考 then pro
  • 无法将中间件与 Firebase 和 NuxtJS 3 一起使用

    我正在尝试在示例项目中使用 Firebase 身份验证 身份验证按预期工作 但是一旦我想使用中间件来阻止用户访问管理页面或在已经登录的情况下访问登录页面 这是不可能的 我已经尝试了几个小时 但没有任何效果 这是我的package json
  • ES6 Promises/在满足多个 Promise 后调用函数(不能使用 Promises.all)[重复]

    这个问题在这里已经有答案了 我正在编写 Javascript 它需要这些事件按以下顺序发生 同时触发多个 API 调用 所有调用完成且响应返回后 执行一行代码 听起来很简单 但棘手的部分是我不能使用 Promises all 因为我仍然希望
  • 使用 ngx-translate 时更改 URL

    当有人使用 ngx translate 单击所选语言时 我尝试更改 URL 我想我应该通过订阅语言更改事件然后修改当前的 url 以反映所选的语言来做到这一点 因为我是新手 所以我不确定是否需要服务来做到这一点 或者可能是另一种解决方法 我
  • 为什么 if 语句中的赋值等于 true?

    首先我要说的是我理解两者之间的区别 and 第一个用于将右侧值分配给左侧变量 第二个用于比较两个值的等价性 第三个不仅用于等价性 还用于类型比较 即true 1会回来false 所以我知道almost任何时候你看到if 作者很有可能打算使用
  • c3js数据标签的位置

    有没有可能的方法来更改数据上方标签的位置c3条形图 在官方文档中 很好地解释了如何通过操作 y 和 x 整数来更改 x 和 y 测量轴上标签的位置 但我没有找到任何数据标签 我试图用简单的方式指出它d3其上c3是基于但是console lo
  • 添加元数据到快速路线

    有什么方法可以将元数据添加到 Express 的路线中吗 例如 app get some route function req res some meta data 我正在寻找一种针对我的节点应用程序的 AOP 方法 因此我想通过身份验证和
  • 为什么react中的组件需要大写? [复制]

    这个问题在这里已经有答案了 因此 当您声明一个组件以小写首字母进行反应时 它不会显示 也不会引发错误 当您将组件名称大写时 它确实有效 这样的实现是怎样的呢 为了避免与现有的 html 元素发生冲突 还是这是一个错误 var test Re
  • js中将div旋转到一定高度

    How to rotate a div to certain height suppose 10px I can rotate a div otherwise around 360 degrees I need the angle by w
  • javascript捕获文本区域中的粘贴事件

    我目前有一个文本区域 我需要控制已粘贴的文本 本质上 我需要能够将用户想要粘贴到文本区域中的任何内容并将其放入变量中 然后我将计算出他们粘贴文本的位置和字符串的大小 以将其从文本区域中删除 然后最后用我自己的方式处理变量中的文本 我的问题
  • 通过排列四个给定数字找到最大可能时间 HH:MM

    我最近为了工作晋升而参加了编码测试 这是我真正遇到的任务之一 我想知道什么是最好的方法来做到这一点 我使用了大量的 if 和 if else 这不是最干净的解决方案 但完成了工作 我被问到的问题是 将 4 个数字格式化为 24 小时时间 0
  • 在 Javascript 中使用 fetch API 接收和处理 JSON

    在我的项目中 当条件不足时 我的 Django 应用程序会发送带有消息的 JSON 响应 我使用这个 JsonResponse 指令 Code data is taken email email return JsonResponse da

随机推荐

  • 深度学习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采用异步回调的方式来处理需要等待的事件 使得代码会继续往下执行不用在某个地方等待着 但是也有一个不好的地方 当我们有很多回调的时候 比如这个回调执行完需要去执行下个回调 然后接着