用最简单的例子讲解js中解决异步的方法

Posted 2023-02-19 兰村_frontend

解决js异步的方法有很多种，今天就讲解一下如何解决js中的异步问题。

在讲解异步解决办法之前我们需要知道什么是异步。定时器、AJAX、事件绑定等都会引起js的异步行为，今天用js中的定时器为例来讲解，看下题。

考虑下题中输出的结果为：

    function getData() 
		setTimeout(function() 
			let name = '张三';
			return name;
		, 1000);
	
	console.log(getData());

这里就有很多人会说输出的结果为张三，那就说明你还没有真正理解异步。其实真正的输出结果为：undefined。这是因为setTimeout方法为异步方法。如果不明白为什么会这样，这里我讲一下js的执行机制大家就会更加明白了。

js执行机制：
(1).所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）；
(2).主线程之外，还存在一个"任务队列"（task queue），只要异步任务有了运行结果，就在"任务队列"之中放置一个事件；
(3).一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件，那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行；
(4).主线程不断重复上面的第三步；

解决异步的方法一（回调函数）：

  function getData(callback) 
  	setTimeout(function() 
  		let name = '张三';
  		callback(name);
  	, 1000);
  
  getData(function(aaa)
    console.log(aaa); //等待一秒之后输出 张三
  )

解决异步的方法二（es6的Promise）：

function getData(resolve, reject)
    setTimeout(function() 
		var name="张三";
		resolve(name);
	, 1000);
;

var p = new Promise(getData);
p.then(function(data)
	console.log(data);//等待一秒之后输出 张三
)

解决异步的方法三（es7的async/await）：
async用于申明一个异步的function，而await用于等待一个异步方法执行完成。

   async function getData() //通过async封装异步方法
	   return new Promise((resolve, reject) => 
			setTimeout(function() 
				var name = '张三';
				resolve(name);
			, 1000);
		)
	
		
    async function main()
		var data = await getData();
		console.log(data);//等待一秒之后输出 张三
	
	main();

以上就是处理异步最常用的三种方法，不过第一种的回调函数方法是es6之前的处理方法，容易造成回调地狱，不易维护，不建议过多使用。