await搭配promise使用

最新推荐文章于 2025-06-01 11:03:33 发布

huangminmin1001

最新推荐文章于 2025-06-01 11:03:33 发布

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/huangmin113659/article/details/93211710

JS 专栏收录该内容

16 篇文章

订阅专栏

此博客展示了Vue中async/await的使用。定义了组件数据，在mounted钩子调用change方法，其中使用await依次调用change2和change1方法。还定义了foo方法，在其中使用await处理多个Promise，包括resolve和reject情况，展示了async/await在异步操作中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <span>{{ x }}</span> <br>
    <span>{{ y }}</span> <br>
    <h1>-----------</h1>
    <button @click="foo">click</button>
  </div>
</template>

<script>
export default {
  name: 'Await',
  data() {
    return {
      x: '1',
      y: '2'
    }
  },
  mounted() {
    this.change()
  },
  methods: {
    async change() {
      await this.change2()
      await this.change1()
    },
    async change1() {
      console.log('=====change1')
      const _this = this
      return new Promise((resolve) => {
        setTimeout(() => {
          _this.x = 'x'
          resolve() // 必须要有resolve, await才能生效
        }, 500)
      })
    },
    async change2() {
      console.log('=====change2')
      const _this = this
      return new Promise((resolve) => {
        setTimeout(() => {
          _this.y = 'y'
          resolve() // 必须要有resolve, await才能生效
        }, 500)
      })
    },
    async foo() {
      var a = await new Promise((resolve) => {
        setTimeout(() => {
          resolve(1)
        }, 2000)
      })
      console.log(a) // 第2秒时输出: 1

      try {
        var b = await new Promise((resolve, reject) => {
          setTimeout(() => {
            reject(2)
          }, 1000)
        })
      } catch (e) {
        console.log(e) // 第3秒时输出: 2
      }

      // 函数暂停2秒后再继续执行
      var sleep = await new Promise((resolve) => {
        setTimeout(() => {
          resolve('sleep')
        }, 2000)
      })

      var c = await 3
      console.log(c) // 第5秒时输出: 3
    }
  }
}
</script>

<style scoped>

</style>