Tworzenie uniwersalnej funkcji w JavaScript - usuwanie powtarzającego się kodu

Question

Cześć wszystkim - to tak słowem wstępu.

Zacząłem się uczyć Node.js. Stworzyłem małą aplikację która pobiera dane o państwach z popularnego API restcountries

Jak widać na załączonym kodzie, pobieranie danych się powtarza. Chciałbym to wyciągnąć do osobnej funkcji a funkcję wywoływać w każdej z tych metod w zależności od tego co ma robić.

W jaki sposób taką uniwersalną funkcję stworzyć? Co należy wziąć w zaprojektowaniu takiej funkcji? Gotowego rozwiązania nie chcę, tylko takiego szkicu jako to może wyglądać.

const request = require('request')
const urlAPI = require('./urlAPI')

class RequestAPI {
    constructor(name) {
        this.name = name
    }

    getName(name) {
        request(`${urlAPI}/name/${name}`, {json: true}, function (err, res, body) {
            if (err) {
                return console.log('Wystąpił błąd: ', err)
            }
            if (res.statusCode !== 200) {
                return console.log('Nie można wyświetlić informacji na temat kraju. Sprawdź URL.')
            } else {
                console.log(`Nazwa państwa: ${body[0].name}\nStolica: ${body[0].capital}\nWaluta: ${body[0].currencies[0].symbol}\nLiczba ludności: ${body[0].population}`)
            }
        })
    }

    getAllCountry() {
        request(`${urlAPI}/all`, {json: true}, function (err, res, body) {
            if (err) {
                return console.log('Wystąpił błąd: ', err)
            }
            if (res.statusCode !== 200) {
                return console.log('Nie można wyświetlić informacji na temat kraju. Sprawdź URL.')
            } else {
                body.forEach(element => {
                    console.log(`${element.name}`)
                });
            }
        })
    }
}

module.exports = RequestAPI

 

Answer 1

Akurat w tym wypadku można zrobić funkcję, która przyjmie 2 parametry: URL żądania oraz callback, któremu przekażemy zawartość odpowiedzi. Dodatkowe, opcjonalne ustawienia można schować w zmiennej options.Całość mogłaby wyglądać jakoś tak:

function getFromAPI( URL, callback, options = {} ) {
	request( `${ urlAPI }/${ URL }`, { json: true }, function( err, res, body ) {
		if ( err ) {
			return console.log( 'Wystąpił błąd: ', err );
		}

		if ( res.statusCode !== 200 ) {
			return console.log( options.httpError || `Wystąpił błąd HTTP ${ res.statusCode }` );
		}

		callback( body );
	} );
}

i przykładowe wywołanie:

getFromAPI( `name/${name}`, function( body ) {
	console.log( `Nazwa państwa: ${ body[ 0 ].name }\nStolica: ${ body[ 0 ].capital }\nWaluta: ${ body[ 0 ].currencies[ 0 ].symbol }\nLiczba ludności: ${ body[ 0 ].population }` );
}, {
	httpError: 'Nie można wyświetlić informacji na temat kraju. Sprawdź URL.'
} );

Można sam callback również przerzucić do opcji, a można też wgl się go pozbyć, na rzecz Promise.

Comments

Masz funkcje, która przyjmuje url, opcje i callback i owijasz ją w funkcje, która przyjmuje url, opcje i callback ja tego nie kupuje

---

@Comandeer, poradziłem sobie. Zrobiłem to w następujący sposób.

Stworzyłem nowy plik do którego wrzucam wszystkie funkcje które są jest wykonywane w zależności od polecenia. zawartość pliku:

module.exports = {
    getAllCountryName(body) {
        body.forEach(element => {
            console.log(`${element.name}`)
        });
    },

    getCapital(body){
        console.log(`Nazwa państwa: ${body[0].name}\nStolica: ${body[0].capital}\nWaluta: ${body[0].currencies[0].symbol}\nLiczba ludności: ${body[0].population}`)
    },

    getName(body) {
        console.log(`Nazwa państwa: ${body[0].name}\nStolica: ${body[0].capital}\nWaluta: ${body[0].currencies[0].symbol}\nLiczba ludności: ${body[0].population}`)
    },
}

Następnie w pliku gdzie jest klasa, tymczasowo umieściłem funkcję która wykonuje całe zapytanie do API. Tą funkcję muszę przenieść do osobnego pliku.

function getAPIRequest(url, requestType, callback) {
    request(`${urlAPI}/${url}/${requestType}`, {json: true}, function (err, res, body) {
         if (err || res.statusCode !== 200) {
             return console.log('Nie można wyświetlić informacji na temat kraju. Sprawdź URL.')
         } else {
             callback(body)
         }
     })
 }

Potem w klasie są odpowiednie metody które są wywoływane w zależności od opcji jaką wybierzemy. Czy chcemy szukać po nazwie Państwa, Stolicy czy wylistować wszystkie kraje:

class RequestAPI {
    getName(name) {
        getAPIRequest('name', name, requestType.getName)
    }

    getCapital(capital) {
        getAPIRequest('capital', capital, requestType.getCapital)
    }

    getAllCountry() {
        getAPIRequest('all', requestType.getAllCountryName)
    }
}

@BT101,  poczytaj o callback, to jest klucz do zrozumienia działania tego mechanizmu. 

URL - jest to parametr bez zmienny, który jest zawsze taki sam

Opcje(u mnie jest to parametr (requestType) - typ operacji jaki użytkownik chce wykonać.

Callback - tutaj przekazywana jest w parametrze funkcja która jest zależna od opcji jaką użytkownik wykonuje.

---

@BT101, wszystko się rozbija o poziom abstrakcji. W pierwotnym kodzie mamy dwa miejsca blisko siebie w kodzie robiące taką samą rzecz, różniące się tylko dwiema rzeczami: URL-em i sposobem obsługi odpowiedzi. To jest wręcz idealne miejsce do wprowadzenia wspólnej funkcji, która pozwalałaby przejść naszemu kodowi z pokazywania jak coś robi do pokazywania co robi.

@Kamil Gadawski, raczej bym widział tutaj mimo wszystko getAPIRequest( URL, callback, options ), gdzie jedną z opcji byłby typ żądania. Mając tak przygotowaną funkcję, możemy później dodawać dowolne opcje bez zmieniania sygnatury funkcji + można podać domyślne wartości dla tych opcji. Przy okazji: nie sądzisz, że nazwa jest ciut myląca? Ty nie pobierasz żądania z API, tylko chcesz je wykonać (czyli szybciej doAPIRequest).

 

Ogólnie to naskrobałem kiedyś artykuł o abstrakcjach → https://blog.comandeer.pl/o-abstrakcji-slow-kilka.html

---

@Comendeer masz oczywiście rację z nazwą. Ciężko mi jest zrozumieć options. Do końca nie wiem jak to ma działać i dlatego tego nie użyłem, choć były by to jeszcze bardziej uniwersalne.

---

W podlinkowanym wyżej artykule omawiam ten koncept nieco dokładniej.

Answer 2

Ale tam się nic nie powtarza, uniwersalna funkcja, która robi requesty to jest ten moduł co requirujesz ten "request". Robisz 2 calle w 2 funkcjach ja tu nie widzę kodu, który by się powtarzał. Troche można zrefaktoryzować kilka kwestii:

• Nie wiem po co returnujesz console.log, watpie zebys to robil z premedytacja
• Można by stworzyć jakiś plik z http configiem żeby potem jak się coś zmieni nie musieć zmieniać w każdym requeście tylko w 1 pliku
• Można użyć funkcji strzałkowych (żaden upgrade ale imo ładniej wygląda)
• Sprawdzenie err i !200 u Ciebie sprowadza się do jednego więc można to połączyć
• Można by stworzyć plik z jakąś obsługą tych ewentualnych błędów z requestu
• No i ja osobiście bym wolał użyć czegoś co używa promisów a nie callback funkcje

const request = require('request')
const urlAPI = require('./urlAPI')
const httpConfig = require('./http/config')
const httpError = require('./http/error')
 
class RequestAPI {
    constructor(name) {
        this.name = name
    }
 
    getName(name) {
        request(`${urlAPI}/name/${name}`, httpConfig, (err, res, body) => {
            if (err || res.statusCode !== 200) httpError.handleError();
            if (res.statusCode === 200) {
                console.log(`Nazwa państwa: ${body[0].name}\nStolica: ${body[0].capital}\nWaluta: ${body[0].currencies[0].symbol}\nLiczba ludności: ${body[0].population}`) 
            }
        })
    }
 
    getAllCountry() {
        request(`${urlAPI}/all`, httpConfig, (err, res, body) => {
            if (err || res.statusCode !== 200) httpError.handleError();
            if (res.statusCode === 200) {
                body.forEach(e => console.log(`${e.name}`));
            }
        })
    }
}
 
module.exports = RequestAPI

 

Comments

Przecież nawet w Twoim zrefactoryzowanym przykładzie widać wyraźnie, że cała obsługa żądania i błędów jest taka sama, różni się tylko parsowanie body.