Promise和async/await

一时失言乱红尘 2021-10-24 02:24 441阅读 0赞

**这篇先讲Promise和async/await使用，下一篇讲在事件循环中Promise和async/await执行顺序**

**1.先看一段代码**

先看一段代码，对Promise和async/await使用有个初步了解

//首先使用Promise模拟一个发起请求的函数，该函数执行后，会在1s之后返回数值30
    function fn(){
    	return new Promise(function(resolve,reject){
    		setTimeout(function(){
    			resolve(30);
    		},1000);
    	})
    }

使用async/await语法来模拟同步的效果。

var foo = async function(){
    	var t = await fn();
    	console.log(t);
    	console.log('next code');
    }
    
    foo();
    
    //输出结果（会阻塞后面代码的执行）
    30
    next code

使用Promise的.then链式处理

var foo = function(){
    	fn().then(function(resp){
    		console.log(resp);
    	});
    	console.log('next code');
    }
    
    foo()
    
    //输出结果
    next
    30

async其实是Promise的一个语法糖，async函数运行后返回的是一个标准的Promise对象。

await的含义是等待，意思就是代码需要等待await后面的函数运行完并且有了返回结果之后，才继续下面的代码。这正是同步的效果。

当使用一个变量去接收await的返回值，该返回值为Promise中resolve传递出来的值，也就是PromiseValue。

看async/await输出结果可知，当运行遇见await时，就会等待await后面的函数运行完毕，而不会直接执行next code。

如果直接使用then方法，要想达到同样的结果，就不得不把后续的逻辑写在then方法中。

const foo = () => {
    	return fn().then(t => {
    		console.log(t);
    		console.log('next code');
    	})
    }
    
    foo();

很显然，如果使用async/awit，代码结构会更加简洁，逻辑也更清晰。

参考文章：  
《JavaScript核心技术开发解密》  
https://segmentfault.com/a/1190000007535316  
https://blog.fundebug.com/2017/04/04/nodejs-async-await/