前端常见问题以及处理方式 - - - (十二) js中的 async 函数

提示：前端查漏补缺，仅代表个人观点，不接受任何批评

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、async 函数是什么？

async函数是异步的一种方案，可以让异步的操作同步执行。

---

二、async 函数的介绍

1.语法：

代码如下（示例）：

async function name([param[, param[, ... param]]]) { 
statements }

- name: 函数名称。
- param: 要传递给函数的参数的名称。
- statements: 函数体语句。

2.返回值：

• async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

代码如下（示例）：

async function helloAsync(){
    return "helloAsync";
  }
  
console.log(helloAsync()) 
 // Promise {<resolved>: "helloAsync"}
 
helloAsync().then(res=>{
   console.log(res);         // helloAsync
})

注意：

• 当async 函数中有 await 表达式的时候，async 函数执行时，遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。
• await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误。

//示例代码

function testAwait(){
   return new Promise((resolve) => {
       setTimeout(function(){
          console.log("testAwait");
          resolve();
       }, 1000);
   });
}
 
async function helloAsync(){
   await testAwait();
   console.log("helloAsync");
 }
 
helloAsync();
// testAwait
// helloAsync

---

三、await 命令

注意：await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。

1.语法：

[return_value] = await expression;

• expression: 一个 Promise 对象或者任何要等待的值。

2.返回值：

• 它返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。
• 如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果。

function testAwait (x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
 
async function helloAsync() {
  var x = await testAwait ("hello world");
  console.log(x); 
}

helloAsync ();
// hello world

• 正常情况下，await 命令后面是一个 Promise 对象，它也可以跟其他值，如字符串，布尔值，数值以及普通函数等等。

function testAwait(){
   console.log("testAwait");
}
async function helloAsync(){
   await testAwait();
   console.log("helloAsync");
}

helloAsync();
// testAwait
// helloAsync

3.await针对所跟不同表达式的处理方式

• Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
• 非 Promise 对象：直接返回对应的值。

---

总结

提示：这里对文章进行总结：

1.await 函数只能用在async函数中.
2.模仿一个应用场景（用async函数编写）：

//创建群
async createGroup(_, { info }, context) {
		//context：用户鉴权
        if (context.logined && context.user) {
        	//查询群名是否已经存在
            let repeat = await queryRow(`SELECT id FROM group_list WHERE name = ?`, [info.name])

            if (repeat) {
                return { groupID: '', message: '名字已经被注册使用,请换一个再试' }
            } else {
                let cid = idGenerator.getUniqueID()
                let stamp = stampToString(Date.now())

				//添加数据
                await queryRow(`INSERT INTO group_list (id,u_id,name,logo,price,create_time)  VALUE (?,?,?,?,?,?)`, [cid, context.u_id, info.name, info.logo, info.price, stamp])
				//	返回id
                return { groupID: `${cid}`, message: 'ok' }
            }
        }
    },