1. 首页
  2. Web

JavaScript异步编程

JS采用单线程模式工作的原因

JavaScript的执行环境是单线程执行,因为JS语言是最早是运行再浏览器的语言,主要目的是为了现实动态交互。实现动态交互的核心就是DOM操作,因此决定了JS必须是单线程模式工作。假设JS是多线程一起工作的,一个线程修改了一个DOM元素,另外一个线程是要删除这个DOM元素,可能会冲突,因为不明确以哪个线程为准。(注:浏览器是多线程)

EventLoop事件循环和消息队列

  • EventLoop是一种循环机制,主线程从消息队列中读取任务并按照顺序执行,这个过程是循环不间断的。
  • 消息队列是存放异步任务的地方,当我们的同步任务都执行完毕后,EventLoop会从消息队列中依次取出异步任务放到调用栈中进行执行。

宏任务和微任务

  • 宏任务可以理解为每次执行栈执行的代码就是一个宏任务

    浏览器为了让JS内部宏任务与DOM操作能够有序的执行,会在一个宏任务执行结束后,下一个宏任务执行开始前,对页面进行重新渲染。

    宏任务包括:script整体代码、setTimeout、setInterval、I/O、UI交互事件、MessageChannel等。

  • 微任务可以理解为每个宏任务执行结束后立即执行的任务,发生在宏任务后,渲染之前,执行微任务。

    所以微任务的响应速度相比宏任务会更快,因为无需等待UI渲染

    微任务包括:Promise.then、MutaionObserver、process.nextTick(Node.js环境下)等。

    异步编程方案的本质—回调函数

    回调函数:由调用者定制,交给执行者执行的函数。

    我们通过 callback 回调函数、事件发布/订阅、Promise 等来组织代码,本质都是通过回调函数来实现异步代码的存放与执行。

    // callback就是回调函数
    // 就是把函数作为参数传递,缺点是不利于阅读,执行顺序混乱。
    function foo(callback) {
        setTimeout(function(){
            callback()
        }, 3000)
    }
    
    foo(function() {
        console.log('这是回调函数')
        console.log('调用者定义这个函数,执行者执行这个函数')
        console.log('其实就是调用者告诉执行者异步任务结束后应该做什么')
    })
    
    
    

    更优异步编程统一方案——Promise

    Promise基本用法

    // Promise 基本示例
    // promise的英文意思是承诺
    // 在JS中Promise是一个对象,接收一个函数作为参数
    const promise = new Promise(function (resolve, reject) {
      // 这里用于“兑现”承诺
      // resolve(100) // 承诺达成
      reject(new Error('promise rejected')) // 承诺失败
    })
    
    promise.then(function (value) {
      // 即便没有异步操作,then 方法中传入的回调仍然会被放入队列,等待下一轮执行
      console.log('resolved', value)
    }, function (error) {
      console.log('rejected', error)
    })
    
    

    Promise的链式调用

    链式调用的理解

    • promise对象then方法,返回了全新的promise对象。可以再继续调用then方法,如果return的不是promise对象,而是一个值,那么这个值会作为resolve的值传递,如果没有值,默认是undefined
    • 后面的then方法就是在为上一个then返回的Promise注册回调
    • 前面then方法中回调函数的返回值会作为后面then方法回调的参数
    • 如果回调中返回的是Promise,那后面then方法的回调会等待它的结束
[送杯奶茶]
  • 版权声明:本文基于《知识共享署名-相同方式共享 3.0 中国大陆许可协议》发布,转载请遵循本协议
  • 文章链接:https://www.imiowo.com/639.html [复制] (转载时请注明本文出处及文章链接)
上一篇:
:下一篇
又是元气MAX的一天(●'◡'●)

作者:洛斯

洛斯
介绍:大西瓜

文章:52篇

最后更新:23-11-01

发表评论

gravatar

当前页面评论被关闭,原因如下: