Dlaczego korzystanie z Axios lub wywołań HTTP w komponentach jest uważane za kiepską praktykę?

Question

In this article, to mówi:

Chociaż to ogólnie słaba praktyka, można użyć bezpośrednio w Axios komponentów do pobierania danych z metody, hak cyklu życia, lub ilekroć.

Zastanawiam się, dlaczego? Zwykle używam haków w całym cyklu życia do pobierania danych (zwłaszcza z created()). Gdzie powinniśmy pisać zaproszenia do składania wniosków?

Answer 1

Pisanie metod bezpośrednio w komponentach zwiększa linie kodu i utrudnia czytanie. O ile wierzę, author sugeruje, aby oddzielić metody API na Service.

Weźmy przykład, w którym musisz pobrać top posts i operować na danych. Jeśli robisz to w komponencie, nie można go ponownie użyć, musisz powielić go w innych komponentach, gdziekolwiek chcesz go użyć.

export default { 
    data:() => ({ 
    top: [], 
    errors: [] 
    }), 

    // Fetches posts when the component is created. 
    created() { 
    axios.get(`http://jsonplaceholder.typicode.com/posts/top`) 
    .then(response => { 
     // flattening the response 
     this.top = response.data.map(item => { 
     title: item.title, 
     timestamp: item.timestamp, 
     author: item.author 
     }) 
    }) 
    .catch(e => { 
     this.errors.push(e) 
    }) 

    } 
} 

Więc kiedy trzeba sprowadzić top post w innym składniku trzeba powielać kod.

Teraz wstawmy API methods w Service.

api.js file 

const fetchTopPosts = function() { 
    return axios.get(`http://jsonplaceholder.typicode.com/posts/top`) 
     .then(response => { 
      // flattening the response 
      this.top = response.data.map(item => { 
      title: item.title, 
      timestamp: item.timestamp, 
      author: item.author 
      }) 
     }) // you can also make a chain. 
} 

export default { 
    fetchTopPosts: fetchTopPosts 
} 

więc użyć powyższego API methods w dowolnych składników, które chcesz.

Po tym:

import API from 'path_to_api.js_file' 
export default { 
     data:() => ({ 
     top: [], 
     errors: [] 
     }), 

     // Fetches posts when the component is created. 
     created() { 
     API.fetchTopPosts().then(top => { 
      this.top = top 
     }) 
     .catch(e => { 
      this.errors.push(e) 
     }) 

     } 
    } 

Answer 2

Jest to dobre dla małych aplikacji lub widżetów, ale w prawdziwym SPA, lepiej jest odciąć swój interfejs API do własnego modułu, a jeśli używasz vuex, aby użyć akcji, aby zadzwonić do tego modułu API.

komponentu nie powinna być concernered z jak i skąd jego dane nadchodzi. Składnik jest odpowiedzialny za interfejs użytkownika, a nie AJAX.

import api from './api.js' 

created() { 
    api.getUsers().then(users => { 
    this.users = data 
    }) 
} 

// vs. 

created() { 
    axios.get('/users').then({ data }=> { 
    this.users = data 
    }) 
} 

W powyższym przykładzie, twoja „Axios-free” kod nie jest naprawdę dużo krócej, ale obraz tego, co potencjalnie można utrzymać się z komponentu:

• obsługi błędów HTTP, na przykład Ponowna próba
• wstępnego formatowania danych z serwera, tak aby pasował do składnikiem
• konfiguracji nagłówka (typu treści, dostęp do tokenu ...)
• tworząc FormData za zamieszczenie na przykład pliki obrazów

lista może być długa. wszystko to nie należy do komponentu, ponieważ nie ma nic wspólnego z widokiem. Widok wymaga tylko wynikowego komunikatu danych lub komunikatu o błędzie.

Oznacza to również, że można samodzielnie testować komponenty i api.