美文网首页
async & await &promise

async & await &promise

作者: 江湖小盛 | 来源:发表于2022-07-06 17:55 被阅读0次

async

  • async 的本质就是会隐式的返回一个 Promise 对象
const getInfo = async () => {
  return 'hello world'
}
getInfo() // Promise {<fulfilled>: "hello world"}
  • 声明为 async 的函数,默认的返回值就是一个 Promise 对象,等同于
const getInfo = async () => {
  return Promise.resolve('hello world')
}
getInfo()  // Promise {<fulfilled>: "hello world"}
  • async声明function是一个异步函数,返回一个promise对象,可以使用 then 方法添加回调函数
  • async函数内部return语句返回的值,会成为then方法回调函数的参数
const getInfo = async () => {
  return Promise.resolve('hello world')
}
getInfo().then(res => {
  console.log(res) // hello world
})
  • async函数返回的 Promise 对象被reject,可以在catch中捕获
const getInfo = async () => {
  return Promise.reject('出错了')
}
getInfo().then(res => {
  console.log(res)
}).catch(err => {
  console.log(err) // 出错了
})

await

  • await 操作符只能在异步函数 async function 内部使用
  • 如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果,也就是说它会阻塞后面的代码,等待 Promise 对象结果
  • 如果等待的不是 Promise 对象,则返回该值本身
const getMsg1 = () => {
  return Promise.resolve('test1')
}

const getMsg2 = () => {
  return Promise.resolve('test2')
}
const resultMsg = async () => {
  const [p1, p2] = await Promise.all([getMsg1(), getMsg2()])
  console.log(p1, p2)
}
resultMsg()
console.log('我先执行')
执行结果:'我先执行' -> 'test1 test2'

错误处理

  • 如果await后面的异步操作出错,那么等同于async函数返回的 Promise 对象被reject
  • 防止出错的方法,也是将其放在try...catch代码块之中
const getMsg1 = () => {
  return Promise.resolve('test1')
}

const getMsg2 = () => {
  return Promise.reject('出错了')
}
const resultMsg = async () => {
  try {
    const [p1, p2] = await Promise.all([getMsg1(), getMsg2()])
    if (p1 && p2) {
       console.log(p1, p2)
    }
  } catch (e) {
    console.log(e)
  }
}
resultMsg()

模拟接口

  // 模拟接口
  function request() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {

        const res = {
          code: 200,
          data: [{
            name: 'zhang',
            age: 10
          }]
        }

        if (res && res.code === 200) {
          resolve(res)
        } else {
          reject('请求失败')
        }
      }, 3000)
    })
  }

  // 请求接口
  const getInfo = async () => {
    try {
      let res = await request()
      if (res && res.code === 200) {
          console.log(res.data)
      }
    } catch (err) {
      console.log(err)
    }
  }

  getInfo()

相关文章

网友评论

      本文标题:async & await &promise

      本文链接:https://www.haomeiwen.com/subject/bweybrtx.html