ES6 - async 函数

254 阅读1分钟

async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

使用方法

  • async 表示函数里有异步操作,

  • await 表示紧跟在后面的表达式需要等待结果。

语法实例

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

一、 async 函数执行结果都是Promise

async function HiAsync() {
 return "hi";
}
async function HelloAsync() {
 return Promise.resolve('hello')
}

console.log(HiAsync())
console.log(HelloAsync())

HiAsync().then(res => {
    console.log(res) // 'hi'
})
HelloAsync().then(res => {
    console.log(res)  // 'hello'
})

二、 await 总能等到结果(即便是嵌套多层的异步)

function getSomething() {
    return "a";
}

async function testAsync() {
    return new Promise((resolve,reject) => {
        setTimeout(() => {resolve('b') }, 3000)
    })
}
async function deepAsync() {
    let p2 = new Promise((resolve, reject) => {
        setTimeout(() => { resolve('c') }, 1000)
    })
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve(p2) }, 3000)
    })
}

async function test() {
    const v1 = await getSomething();
    console.log('v1',v1)
    const v2 = await testAsync();
    console.log('v2',v2)
    const v3 = await deepAsync();
    console.log('v3',v3);
}
test();

注意点

一、 await 命令后面的 Promise 对象,运行结果可能是 rejected,所以最好把 await 命令放在 try...catch 代码块中。

async function myFunction() {
  try {
    await somethingThatReturnsAPromise();
  } catch (err) {
    console.log(err);
  }
}

// 另一种写法

async function myFunction() {
  await somethingThatReturnsAPromise().catch(function (err){
    console.log(err);
  });
}

二、 await 的使用时 必须在async 函数中

如果用在普通函数,就会报错。如果将 forEach 方法的参数改成 async 函数,也有问题。

正确的写法是采用 for 循环

async function dbFuc() {
  let docs = [1, 2,3];

  for (let doc of docs) {
    console.log(doc)
  }
}