Home JavaScript

# async 写法与执行流程

  • 这种情况下与默认的函数是一样的
async function foo() {
   console.log('foo function start~')
}
foo()
console.log('foo function end~')
// foo function start~
// foo function end~
# 和普通函数的区别一 返回值


# 返回一个值


async function foo() {
  console.log('foo function start~') // 执行顺序 1
  return {
    then: function (resolve) {
      resolve('22333')
    }
  }
}
// 异步函数的返回值一定是一个 Promise
const promise = foo()
promise.then(res => {
  console.log(res) // 执行顺序 3  res: 22333
})
console.log('这行代码会在中间执行') // 执行顺序 2
# 返回 thenable


async function foo() {
  console.log('foo function start~') // 执行顺序 1
  return {
    then: function (resolve) {
      resolve('22333')
    }
  }
}
// 异步函数的返回值一定是一个 Promise
const promise = foo()
promise.then(res => {
  console.log(res) // 执行顺序 3  res: 22333
})
console.log('这行代码会在中间执行') // 执行顺序 2
# 返回 Promise


async function foo() {
  console.log('foo function start~') // 执行顺序 1
  return new Promise(resolve => setTimeout(() => resolve('promise~') , 2000))
}
// 异步函数的返回值一定是一个 Promise
const promise = foo()
promise.then(res => {
  console.log(res) // 执行顺序 3  res: promise~
})
console.log('这行代码会在中间执行') // 执行顺序 2
# 和普通函数的区别二 异常


async function foo() {
  console.log('foo function start~') // 执行顺序 1
  throw new Error('throw new Error')
}
foo().catch(err => {
  console.log(err) // 执行顺序 3： Error: throw new Error...
})
console.log('foo function end~') // 执行顺序 2
# await 返回值


# 函数返回 Promise


function requestData() {
  return new Promise((resolve, reject) => setTimeout(() => resolve(233), 5000))
}
async function foo() {
  // 相当于是调了 then 方法 并得到结果
  const res = await requestData()
  console.log(res) // 5s -> 233
  // 只有等到 resolve 下面代码才会执行
  console.log('---------------') // 5s
  // 上一个 then 方法结束继续写 相当于又调了一次 then 并得到结果
  const res2 = await requestData()
  console.log(res2) // 10s -> 233
}
foo()
# 直接返回 Promise


async function foo() {
  const res = await new Promise(resolve => resolve(233))
  console.log(res) // 233
}
foo()
# 普通值


async function foo() {
  const res = await 233
  console.log(res) // 233
}
foo()
# thenable


async function foo() {
  const res = await {
    then: function (resolve, reject) {
      resolve(233)
    }
  }
    console.log(res) // 233
}
foo()
# reject


function requestData() {
  return new Promise((_, reject) => setTimeout(() => reject(233), 2000))
}
async function foo() {
  const res = await requestData()
  // 这后面的代码不会执行啦 ^-W-^
  console.log(res)
  console.log('------------')
}
foo().catch(err => console.log(err)) // 233