Async & Await

简介

1. async与 await是 generator函数的语法糖
2. async需要写在function方法的前面
3. async 和 await 都是成对出现的， await 必须写在 async的里面
4. async & await 相较于 Promise，不需要写 then或者catch回调函数，代码更加的整洁

   async

   async的作用和 Promise.resolve() 类似 ```javascript async function foo() { return ‘imooc’ } console.log(‘async’, foo())

console.log(‘promise静态方法’, Promise.resolve(‘imooc’))

![image.png](https://cdn.nlark.com/yuque/0/2021/png/656731/1614520957262-b2a7f99f-0487-4e7c-829d-a4266e3161f3.png#crop=0&crop=0&crop=1&crop=1&height=144&id=T20Ik&margin=%5Bobject%20Object%5D&name=image.png&originHeight=144&originWidth=378&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10544&status=done&style=none&title=&width=378)
<a name="xVDay"></a>
### await
`await `后面一般跟着的是 `promise`类型的异步操作，不会直接跟着基本数据类型，这种做法是没有意义的
```javascript
async function foo() {
  let result = await 'imooc'
  console.log('result', result)
}
foo() // result imooc

这段代码的执行结果是，先输出2再输出1

function timeout() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('1')
      resolve()
    }, 1000);
  });
}
async function foo() {
  timeout()
  console.log('2')
}
foo() // 2  1

await的作用是将异步操作的写法，等同于 同步操作的写法，看起来更加的优雅

function timeout() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('1')
      resolve()
    });
  }, 1000);
}
async function foo() {
  await timeout()
  console.log('2')
}
foo()

在timeout()方法前面添加await，就可以等待异步操作执行完成后在执行后面的代码

常规有值的promise函数

function timeout() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('1')
    });
  }, 1000);
}
async function foo() {
  const res = await timeout()
  console.log('res', res) // 1
}
foo()

报错的promise函数处理

async装饰的函数，最终返回的结果也是 promise类型的数据，所以promise对象支持的 then和 catch方法也是可以使用

function timeout() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('报错信息')
      // resolve('success')
    }, 1000);
  });
}
async function foo() {
  return await timeout()
}

foo().then(res => {
  console.log('res', res)
}).catch(err => {
  console.log('err', err) // err 报错信息
});

与promise结合，实际使用

function request(url) {
  return new Promise(resolve => {
    ajax(url, res => {
      resolve(res)
    });
  })
}

async function getData() {
  const res1 = await request('static/a.json')
  console.log('res1', res1) // 'a'
  const res2 = await request('static/b.json')
  console.log('res2', res2) // 'b'
  const res3 = await request('static/c.json')
  console.log('res3', res3) // 'c'
}
getData()