typescript 用异步等待重写API取数组合

egdjgwm8 于 2023-01-06 发布在 TypeScript

关注(0)|答案(1)|浏览(124)

我正在使用composable从API获取数据

- 可组合/类别. ts**

import { useHttp } from './Http'
import type { ICategory } from '@/models/category.model'

export const useCategory = () => {
  const categories = ref<ICategory[]>([])
  useHttp().get('/category').then((res) => categories.value = res.data)
  return { categories }
}

- 某些组件值**

import { useCategory } from '@/composables/Category'
const { categories } = useCategory()

这段代码工作得很完美，唯一的问题是当我尝试用Async wait和try catch重写代码时，发生了一些错误

import { useHttp } from './Http'
import type { ICategory } from '@/models/category.model'

export const useCategory = async () => {
  const categories = ref<ICategory[]>([])
  async function get() {
    const res = await useHttp().get('/category')
    categories.value = res.data
  }
  onMounted(async () => {
    get()
  })
  return { categories }
}

属性"categories"在类型"Promise〈{categories：引用〈{_ id：字符串;标题：字符串; }[]〉;}〉'. ts（2339）
我怎样才能用async/await和try/catch重写这个可组合函数呢？

typescript

来源：https://stackoverflow.com/questions/74986480/how-to-rewrite-composable-that-get-data-from-api-with-async-await

1条答案

按热度按时间

e3bfsja21#

这个错误说明了一切。你的函数返回了一个Promise<{ categories: Ref<...> }>，而不是一个{ categories: Ref<...>}。所以当你这样使用时，你需要await它：

const { categories } = await useCategory()

或者，您可以删除函数中的async注解，因为其中没有await。

export const useCategory = () => {
  const categories = ref<ICategory[]>([])
  async function get() {
    try {
        const res = await useHttp().get('/category')
        categories.value = res.data
    }
    catch(err){
        // Do something with the err
    }
  }
  onMounted(() => {
    get()
  })
  return { categories }
}

赞(0）回复(0）举报 2023-01-06

我来回答

typescript 用异步等待重写API取数组合

1条答案

相关问题

热门标签

最新问答