My initial objective was importing the store Token and use it's value directly in the FinancialInstitution class instead of passing it as a parameter to the function, but none of the usage has worked as expected, get() nor subscribe().

My objective is to make a single request to the **listFinancialInstitutions()** only after having the token store set.

And what's currently happening is that the request is made two times, the first one with the initial value of empty string and then the second time with the result of the response.

What am I missing to obtain the behavior that I want?

So I've created a service called token.js:

```
export class Token {
    async createToken() {
        const init = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Accept': 'application/json'
            },
            mode: 'cors'
        };
        return await fetch(`${middleware}/token`, init)
            .then((res) => res.json())
            .catch((err) => console.log(err));
    }
}

```

The store.js:

```
import {readable} from 'svelte/store';
import {Token} from './services/token';

const tokenService = new Token();
export const token = readable('', set => {
    tokenService.createToken().then(res => set(res.access_token))
});

```

The service to obtain the list:

```
export class FinancialInstitution {
    async listFinancialInstitutions(token) {
        // if (typeof token !== 'string') {
        //     return;
        // }
        const init = {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Authorization': `Bearer ${token}`
            },
            mode: 'cors'
        };
        return await fetch(`${middleware}/financial-institutions`, init)
            .then((res) => res.json())
            .catch((err) => console.log(err));
    }
}

```

The svelte component:

```
<script>
    import {FinancialInstitution} from '../services/financial-institution';
    import {token} from '../store';

    let financialsPromise;
    const financialService = new FinancialInstitution();
    token.subscribe(t => {
        financialsPromise = financialService.listFinancialInstitutions(t);
    })
</script>

<section>
    <h2>Financial Institutions</h2>
    {#await financialsPromise}
        <span>⏳ Fetching the list of financial institutions </span>
    {:then financials}
        <ul>
            {#each financials.data as financial}
                <li>{financial.id}</li>
            {/each}
        </ul>
    {:catch error}
        <p>Sorry but there's no data </p>
    {/await}
</section>
<style>
    ul {
        padding-left: 0;
    }

    ul li {
        list-style: none;
    }
</style>

```