Блог

У меня есть следующий код, который извлекает данные. 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 и обновить книги.

Вы могли бы наблюдать 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
  }
}