如何在 Vue 3 中正确使用组合 api 中的钩子

Question

我学习了如何在 Vue 3 中使用新组合 api，在一节课中我看到了如何使用组合 api 调用 api 但我做不到它适用于我的代码。我正在 const getPosts = usePromise(PostService.getAll()); 中调用 api - 对服务器的 api 调用成功，但我无法在组件中加载帖子。在 console.log(getPosts) - view/PostList.vue

<template>
  <div>
    <Loader v-if="getPosts.loading" />
    <div v-for="post in posts" :key="post.id"></div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import { Post } from '../types';
import PostService from '../services/PostService';
import usePromise from '../composables/use-promise';
import Loader from '../components/ui/Loader.vue';

export default {
  components: { Loader },
  setup() {
    const posts = ref<Post[]>([]);
    const post = ref<Post>({
      title: '',
      body: '',
    });
    const getPosts = usePromise(PostService.getAll());
    console.log(getPosts);
    posts.value = getPosts.result.value;

    return { posts, post, getPosts };
  },
};
</script>

composables/use-promise.ts - console.log(response) - 控制台中从未出现过响应

import { ref } from 'vue';
export default function usePromise(fn: any) {
  // fn is the actual API call
  const result = ref(null);
  const loading = ref(false);
  const error = ref(null);
  const createPromise = async (...args: any) => {
    // Args is where we send in searchInput
    loading.value = true;
    error.value = null;
    result.value = null;
    try {
      const response = await fn(...args);
      console.log(response);
      result.value = response;
    } catch (err) {
      error.value = err;
    } finally {
      loading.value = false;
    }
  };

  return { result, loading, error, createPromise };
}

services/Api.ts

import axios from 'axios';

export default axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com/',
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
  },
});

services/PostService.ts

import Api from './Api';
export default {
  async getAll() {
    const response = await Api.get('/posts');
    return response.data;;
  },
};

Answer 1

您需要如下使用您的 promise 钩子：

const posts = ref < Post[] > ([]);
const {
  createPromise,
  result
} = usePromise(PostService.getAll);

createPromise().then(() => {
  console.log(result.value.data);
  posts.value = result.value.data as Post[]
})

如何在 Vue 3 中正确使用组合 api 中的钩子

How to use correctly hook from composition api in Vue 3

vue.js

vuejs3

vue-composition-api