JavaScript 使用 async/await

简单介绍

• async 用来申明一个异步的方法，await 只能在异步方法里面使用，这二者是配套的
• async修饰的方法调用的时候里面的代码会立即执行直到遇到 await 就会先返回，等到异步操作执行完成，再接着执行函数体内后面的语句
• 简单来说就是：async函数调用不会造成代码的阻塞，但是await会引起async函数内部代码的阻塞

一、示例

async function func() {
  console.log('async function is running!');
  const num1 = await 200;
  console.log(`num1 is ${num1}`);
  const num2 = await num1+ 100;
  console.log(`num2 is ${num2}`);
  const num3 = await num2 + 100;
  console.log(`num3 is ${num3}`);
}

func();
console.log('run me before await!');

二、await返回

• await 是一个操作符，后面的是一个表达式，这个表达是可能返回一个Promise，也可能返回一个常量

1、返回常量

• 假如这个表达式如果返回的是一个常量，那么会把这个常量转为Promise.resolve(xx)，同理如果没有返回值也是Promise.resolve(underfind)

async function testAwait() {
    const data = await "hello await";
    console.log(data);
    return data;
}

testAwait();

2、返回Promise

• 假如这个表达式如果返回的是一个Promise 对象， 那么它的返回值，实际上就是 Promise 的回调函数 resolve 的参数，如果这个Promise rejected 了，await 表达式会把 Promise 的异常抛出

function say() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            let age = 26
            resolve(`hello, joel。今年我 ${age} 岁`);
        }, 1000);
    });
}

async function demo() {
    const v = await say(); // 等待这个say 的异步，如果成功把回调 resole 函数的参数作为结果
    console.log(v);
}
demo();

三、async函数返回

• 异步函数默认返回一个 Promise 对象，就算是像下面的示例中这样 return 一个常量，最后也是被包装为一个Promise
• 从输出的结果可以看出实际上也是将这个常量转为Promise.resolve(xx)，返回Promise对象的
  

---

和Promise比较

• async—await 就是 Promise—then的语法糖，使用 async—await 的好处就是用类似同步代码的方式书写了异步程序，更加符合编程习惯，而且避免了使用Promise 需要写的长长的then链和里面的回调函数

//promise
function test(){
	return new Promise(function(resolve,reject){
		console.log('async function is running!');
		return resolve(200)
	})
}

test().then((num)=>{
	console.log(num);
	return num + 100;
}).then((num)=>{
	console.log(num);
	return num + 100;
}).then((num)=>{
	console.log(num);
	return num + 100;
})

//async--await
async function func() {
  console.log('async function is running!');
  const num1 = await 200;
  console.log(`num1 is ${num1}`);
  const num2 = await num1+ 100;
  console.log(`num2 is ${num2}`);
  const num3 = await num2 + 100;
  console.log(`num3 is ${num3}`);
}

func();
console.log('run me before await!');