js2.0

这篇具有很好参考价值的文章主要介绍了js2.0。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

promise语法与事件循环EVent Loop

1.promise

在为引入promise之前,函数的调用多为嵌套形式,当嵌套的内容过多就会造成回调地狱。如下方例子所示:

//在回调函数中嵌套执行
//弊端 : 形成回调地狱(异步回调 层层嵌套,非常麻烦且不便于维护)
//读取文件A
const fs = require('fs')
fs.readFile("./data/a.txt", 'utf-8', (err, data) => {
    if (err) {
        console.log(err);
    } else {
        console.log(data);
        //A读取成功之后开始读取B
        fs.readFile("./data/b.txt", 'utf-8', (err, data) => {
            if (err) {
                console.log(err);
            } else {
                console.log(data);
                //B读取成功之后开始读取C
                fs.readFile("./data/c.txt", 'utf-8', (err, data) => {
                    if (err) {
                        console.log(err);
                    } else {
                        console.log(data);
                    }
                });
            }
        });
    }
});

所以自从引入了promise之后可以用过promise进行解决回调地域问题。首先先了解什么是promise及其作用。

promise的基本使用

1.实例化Promise对象

作用: 将异步操作代码 放入 Promise中

resolve:异步操作 成功状态

reject : 异步操作 失败状态

new Promise((resolve,reject)=>{ 你的异步操作 })

2.调用then()方法处理异步操作结果

promise对象.then((data)=>{ 处理成功数据 },(err)=>{ 处理失败信息 });

上方代码利用promise:

/* 
1.Promise是一个构造函数 , 返回一个Promise对象
2.使用流程
(1)实例化Promise对象 : 将异步操作放入Promise中
(2)调用then() 方法: 处理异步操作结果
*/
const fs = require('fs')
 
//1.创建promise实例对象
const p1 = new Promise((resolve, reject) => {
    //异步操作
    fs.readFile('./data/a.txt', 'utf8', (err, data) => {
        if (err) {
            /* 
            (1)异步操作失败,则执行 reject()
            (2)reject会把把promise对象的状态从 pending进行中 改为 rejected失败
            (3)该方法本质是调用 then() 中的第二个方法
            */
            reject(err)
        } else {
            /* 
            (1)异步操作成功,则执行 resolve()
            (2)resolve会把把promise对象的状态从 pending进行中 改为 fulfilled成功
            (3)该方法本质是调用 then() 中的第一个方法
            */
            resolve(data)
        }
    })
})
 
//2. p1.then() : 处理异步操作结果
p1.then(data => {
    //成功
    console.log(data)
}).catch(err => {
    //失败
    console.log(err)
})
promise特点:

promise本质 不是控制 异步代码的执行顺序(无法控制) , 而是控制异步代码结果处理的顺序

promise本身只是一个容器,真正异步的是它的两个回调resolve()和reject()

但是上方的代码仍然过于复杂所以引入了promise的all方法,进行代码的优化。

all

  • 将多个Promise合并成一个Promise

  • 所有异步全部执行完毕才会执行then方法

  • const fs = require('fs')
     
    //1.创建promise实例对象
    function promise(name) {
        return new Promise((resolve, reject) => {
            //异步操作
            fs.readFile(`./data/${name}.txt`, 'utf8', (err, data) => {
                if (err) {
                    reject(err)
                } else {
                    resolve(data)
                }
            })
        })
    }
     
    //2.解决需求: a , b , c 同时执行完毕
    const p1 = promise('a')
    const p2 = promise('b')
    const p3 = promise('c')
    //将三个异步操作合并成一个Promise
    const pAll = Promise.all([p1, p2, p3])
     
    //开始读取a
    // 三个promise都成功后,才去执行pAll.then的第一个方法.
    // 只要有一个失败了,就去执行catch里面的函数.
    pAll.then((data) => {
        console.log(data)
        //data是一个数组,存储每一个promise的成功结果
    }).catch(err => {
        console.log(err)
    })
    

什么是回调地狱?
回调地狱:在回调函数中再嵌套回调函数的情况称为回调地狱(是实现代码顺序执行的一种操作方式)
(1)代码的可读性差、可维护性差
(2)代码的扩展性差

解决回调地狱问题
回调地狱的问题:
.嵌套层次很深,可读性差,难以维护
.无法正常使用return 和throw
.多个回调之间难以建立联系
回调地狱的解决办法:
(1)Promise
(2)async/await

2.事件循环:

什么是事件循环:
js是一个单线程的。函数执行的过程是将函数执行上下文压入栈中,直到栈中清空,表示这个任务执行结束。为了保证异步的函数按顺序执行,出现了task queue(任务队列)。任务队列的作用是将各种事件或异步的操作进行通知时加入其回调函数。js引擎会不停的从任务队列中取出任务,压入到栈中执行,执行完成后再取下一个任务执行,如此一直到任务队列为空。如果为空,会一直等待新的任务出现。这种不停的等待处理事件的循环称之为事件循环。文章来源地址https://www.toymoban.com/news/detail-448044.html

到了这里,关于js2.0的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web.3js监听智能合约事件event

    在前端页面调用合约写入数据时不会立即返回结果,这时需要再调用获取数据的函数,使用起来非常不便,这时event就可以很好解决这样的问题。 合约代码: 声明event事件: event Deposit(address indexed _from, bytes32 indexed _id, uint _value); 触发event事件: emit Deposit(msg.sender, _id, msg.valu

    2024年02月11日
    浏览(52)
  • Ajax_4(进阶)同步异步+ 宏任务微任务 + Promise链 + async终极解决方案 +事件循环原理 + 综合案例

    01-同步代码和异步代码 什么是同步代码? 同步代码:逐行执行,需要原地等待结果后,才继续向下执行。 什么是异步代码? 调用后耗时,不阻塞代码继续执行,(不必原地等待),在将来完成后 触发一个 回调函数 。 代码阅读 目标:阅读并回答代码执行和打印的顺序 打印

    2024年02月13日
    浏览(48)
  • Node.js 事件循环和事件派发器

    目录 1、process.nextTick() 介绍 2、setTimeout() 3、零延迟 4、setInterval() 5、递归setTimeout 6、setImmediate() 7、Node.js 事件派发器 Node.js中  process.nextTick 函数以一种特殊的方式与事件循环交互。 当你试图理解Node.js事件循环时,它的一个重要部分是process.nextTick()。每次事件循环进行一次完

    2024年02月06日
    浏览(40)
  • js事件循环详解

    JavaScript的事件循环是一种处理异步事件和回调函数的机制,它是在浏览器或Node.js环境中运行,用于管理任务队列和调用栈,以及在适当的时候执行回调函数。 事件循环的基本原理是,JavaScript引擎在空闲时等待事件的到来,然后将事件添加到事件队列中。事件循环会不断地检

    2024年02月07日
    浏览(36)
  • js2.0

    promise语法与事件循环EVent Loop 1.promise 在为引入promise之前,函数的调用多为嵌套形式,当嵌套的内容过多就会造成回调地狱。如下方例子所示: 所以自从引入了promise之后可以用过promise进行解决回调地域问题。首先先了解什么是promise及其作用。 promise的基本使用 1.实例化Prom

    2024年02月05日
    浏览(21)
  • 33、js - 事件循环 微任务 宏任务

    js是 单线程语言 ,也就是某一刻只能执行一行代码,为了让耗时代码不阻塞其他代码运行,设计了 事件循环模型 。 事件循环是一个并发模型,负责执行代码、收集异步任务的模型,在调用栈空闲,反复调用任务队列里回调函数的执行机制,就叫事件循环。 这个模型与其他

    2024年02月08日
    浏览(34)
  • python中import js2py报错:No module named ‘js2py‘

    这种错误的原因是没有安装js2py 安装js2py的方法步骤: 1.首先使用快捷键”Ctrl+R“运行打开任务栏; 2.在任务栏输入cmd,点击确定; 3.找到python的安装路径; 4.这是我的安装路径: 这是我的python安装路径 5.在命令提示符窗口中切换到该路径: 6.然后输入:pip install js2py,点击

    2023年04月08日
    浏览(34)
  • JS引擎中的线程,事件循环,上下文

      线程 浏览器中有哪些进程呢? 1.浏览器进程:浏览器的主进程,负责浏览器的界面界面显示,与用户交互,网址栏输入、前进、后退,以及页面的创建和销毁。 2.渲染进程(浏览器内核):默认一个tab页面一个渲染进程,主要的作用为页面渲染,脚本执行,事件处理等。 3.

    2024年02月08日
    浏览(91)
  • 微信小程序关于wxs语法、以及能否引入js中的方法(不能调用)

    页面中使用wxs 或者  参考:WXS | 微信开放文档 wxs能引入外部js文件吗 | 微信开放社区 微信小程序中的WXS语法 1、WXS 中不支持let和const,不支持箭头函数。 2、变量命名必须符合下面两个规则: 首字符必须是:字母(a-zA-Z),下划线(_) 剩余字符可以是:字母(a-zA-Z),下划

    2024年02月06日
    浏览(64)
  • Vue.js2+Cesium1.103.0 十、加载 Three.js

    Demo ThreeModel.vue index.vue

    2024年02月11日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包