async-await的学习

126 阅读1分钟

async-await的学习

async异步函数写法

// async: 异步函数
async function foo() {

}

// 另外表示方式
const bar = async () => {

}

class xxx {
  // 异步方法
  async xxx() {
    
  }
}

异步函数执行流程

// 只有async关键字的函数与普通函数执行一样,从上往下依次执行(同步)
async function foo() {
  console.log('111111111111');
  console.log('222222222222');
  console.log('333333333333');
}

console.log('code start!~');
foo()
console.log('code end!~');

// code start!~
// 111111111111
// 222222222222
// 333333333333
// code end!~

异步函数的返回值

async function foo() {
  console.log('异步函数代码体执行~');

  // 1.返回一个值,res就是它
  // return 123
  
  // 2.返回一个Promise,状态移交, res就由新Promise控制
  return new Promise((resolve, reject)=>{
    resolve('abc')
  })
}

// 异步函数一定返回一个Promise
const promise = foo()

promise.then(res => {
  console.log('-------', res);
})

异步函数的异常

async function foo() {
  console.log('异步函数代码体执行~');

  // 异步函数的异常,会被当作返回的Promise的reject值的
  throw '错误~'
  console.log('异步函数的剩余代码~');
}

// 异步函数一定返回一个Promise
const promise = foo()
promise.catch(err => {
  console.log(err);
})

console.log('还有代码要执行');

async中使用await关键字

// 注意: 普通函数不能使用await关键字
function requestData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(11111)
      // reject(2222)
    }, 1000);
  })
}

async function foo() {
  const res1 = await /*跟含有Promise的表达式*/ requestData()
  console.log(res1)

  const res2 = await requestData()
  console.log(res2)
}

foo().catch(err => {
  console.log(err);
})