Hi there.
Today I will share how I understood the Adapter Pattern using Vue.js. In short, the Adapter Pattern in Vue.js is used to "adapt" the interface of a component, method, or service so that it can be used in a compatible way with other parts of the code that expect a different interface.
This pattern is useful for integrating third-party components, APIs, or libraries that are not directly compatible with your Vue.js application, allowing for smoother, more flexible integration.
Here is an example:
1- I have a Home.vue file that will do a request to a random API (restcountries):
<script setup lang="ts">
async function getCountry(name: string) {
const response = await useFetch(`https://restcountries.com/v3.1/name/${name}`)
return response.data.value
}
let country: any = await getCountry('brasil')
</script>
<template>
<div>
<pre>
{{ country }}
</pre>
</div>
</template>
Here is the return of the API request:
So, let's imagine that we only need three variables from this response, formatted in a specific way:
interface Country {
countryName: string
countryCapital: string
countryPopulation: number
}
2- I will create another file named adapters.ts and define a function to transform the current format into the one expected by the Country interface:
interface Country {
countryName: string
countryCapital: string
countryPopulation: number
}
// Function that receives the API response and adapts it to an array of Country objects
export function getCountryAdapter(apiResponse: any): Country[] {
// Check if is an array
if (!Array.isArray(apiResponse)) {
throw new Error('The API response is not a Array of countries.')
}
// Maps each country in the response to the Country object format
const countries: Country[] = apiResponse.map((country: any) => ({
countryName: country.name.common,
countryCapital: country.capital[0],
countryPopulation: country.population,
}))
return countries
}
3- Now, let's call the adapter in the Home.vue file:
<script setup lang="ts">
import { getCountryAdapter } from '../services/adapters'
async function getCountry(name: string) {
const response = await useFetch(`https://restcountries.com/v3.1/name/${name}`)
const country = getCountryAdapter(response.data.value)
return country
}
let country: any = await getCountry('brasil')
</script>
<template>
<div>
<pre>
{{ country }}
</pre>
</div>
</template>
4- The final result is the response adapted to the interface 😊:
If you have any suggestions, please let me know. Thank you so much for reading!
Top comments (0)