Vue3如何处理异步操作_vue3 异步请求

Vue3中可以使用async/await和Promise来处理异步操作。

1. async/await：异步函数返回一个Promise对象，使用async关键字标记函数为异步函数，使用await关键字等待异步操作的完成。例如：

async function getData(){
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  return data
}

export default{
  data(){
    return{
      data: null
    }
  },
  async created(){
    this.data = await getData()
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2. Promise：使用Promise对象的then()方法来处理异步操作的结果。例如：

export default{
  data(){
    return{
      data: null
    }
  },
  created(){
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(data => this.data = data)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

需要注意的是，在Vue3中，推荐使用setup()函数来替代Vue2中的created()函数，使用异步函数时也要在setup()里使用async关键字标记。例如：

import { ref } from 'vue'

async function getData(){
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  return data
}

export default{
  setup(){
    const data = ref(null)
    getData().then(d => data.value = d)
    return {
      data
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17