vue.js - 如何在使用带有反应 url 的 axios 操作结果之前等待异步调用 - Vue.js 3

Question

我有以下获取数据的代码。url 应该是响应式的，如果是改变一个新的调用完成。：

const apiClient = axios.create({
  baseURL: 'https://vue-http-demo-some-number.firebaseio.com',
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application-json'
  }
});

function useFetch(getRelativeURL) {
  const data = ref(null);
  const error = ref(null);
  const isPending = ref(true);

  watchEffect(() => {
    apiClient.get(getRelativeURL())
      .then(response => {
        data.value = response.data;
      })
      .catch(err => {
        error.value = err;
      })
      .finally(() => {
        isPending.value = false;
      });
  });
  return {
    data,
    error,
    isPending
  }
}

和电话：

setup() {

  const books = [];
  const {data, error, isPending} = useFetch(() => '/books.json');

  for (const key in data.value) {
    for (const u in data.value[key]) {
      const book = {
        id: key,
        title: data.value[key][u].title,
        description: data.value[key][u].description,
      };
      books.push(book);
    }
  }

  return {
    books,
    error,
    isPending
  }
}

我的问题是，来自的响应userFecth延迟到来，并且在我有非空数据之前提取了书籍。我必须有哪些选项来保持 url 反应性并更新书籍。

标签： vue.jsaxiosvuejs3vue-composition-api

Answer 1

您可以观看data来自组合功能的内容：

import {watch} from 'vue'
setup() {

  const books = [];
  const {data, error, isPending} = useFetch(() => '/books.json');

 watch(()=>data,()=>{
   for (const key in data.value) {
     for (const u in data.value[key]) {
       const book = {
        id: key,
        title: data.value[key][u].title,
        description: data.value[key][u].description,
       };
       books.push(book);
     }
    }
  }
 ,{
 deep:true
 })

  return {
    books,
    error,
    isPending
  }
}