js处理代码异步的几种方式（使用方法和优缺点）

最新推荐文章于 2023-07-16 12:13:17 发布

wangyinze123

最新推荐文章于 2023-07-16 12:13:17 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： js javascript es6 前端 html5

本文链接：https://blog.csdn.net/wangyinze123/article/details/110902760

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript中从回调函数到事件监听，再到发布/订阅模式和Promise的发展，最后介绍了现代异步编程的关键——async/await。通过这些方式，开发者可以更好地管理和组织异步代码，提高代码的可读性和可维护性。

摘要由CSDN通过智能技术生成

在这里插入图片描述

一、回调函数（callback）

是啥：一个函数a被当做另一个函数b的参数，在b的函数体内去执行a

function b(callback){　
　　　　callback();
}
function a(){}
b(a)

优点：能让a函数的逻辑在适当的位置才被执行
缺点：代码逻辑不清，不利于代码的阅读和维护，各个部分之间高度耦合
优化：变成异步回调


function b(callback){　
　　　　setTime(()=>{
			callback();
		},1000)
}
function a(){}
b(a)

二、事件监听

是啥：当某个事件被触发时，才执行绑定在这个事件上的函数

document.on('click',fn)

优点：不同的事件能绑定不同的函数，利于后期代码模块化
缺点：同个事件只能绑定一个函数。并且整个代码都采用事件驱动，执行逻辑不是很清楚
优化： attachEvent和addEvenListener方法

document.addEvenListener("click",fn,false);

三、发布/订阅(观察者模式)

是啥：观察者模式类似一个外卖平台派单的过程，系统通过平台发布一个单子，外卖员一直刷着平台的消息并接收到一条单子，整个过程是一次消息的发布和订阅。
优点：整个消息的发布和订阅都能比较清晰的被看到，代码逻辑易懂。
缺点：发布者和订阅者如果各自对应多个时，并且各自有关联，容易造成循环调用。即使没有关联，也容易造成通知的耗时加长。
在这里插入图片描述

四、promise对象（模式）

是啥：JavaScript 中，所有代码都是单线程的，也就是同步执行的。而 Promise 就为异步编程提供了一种解决方案。

//一、Promise 对象是由关键字 new 及其构造函数来创建的。
const promise = new Promise((resolve, reject) => {
    if (success) {
        resolve(value); //成功的消息
    } else {
        reject(error); //失败的消息
    }
});

//二、then方法处理成功和失败的回调
 promise.then(function(value) {
      // success
  }, function(error) {
      // failure
  });

五、async await

是啥：async是“异步”的意思，async用于声明一个函数是异步的。await意思是“等待”，用来等待async 所声明的异步函数的执行结果，并且await只能在async函数中使用。

async function sync() {
     const result= await new Promise(resolve => {
         setTimeout(() => {
             resolve("async await result");
          }, 1000);
     });
     console.log(result);
}
sync()