如何使用来自另一个 HTTP 请求设置的可读存储的 header 'Authorization' 的值发出 HTTP 请求

Question

我最初的 objective 是导入商店令牌并直接在 FinancialInstitution class 中使用它的值，而不是将其作为参数传递给函数，但是 none 的用法已按预期工作，get() 或 subscribe()。

我的 objective 仅在设置令牌存储后才向 listFinancialInstitutions() 发出单个请求。

目前发生的情况是发出了两次请求，第一次的初始值为空字符串，第二次是响应的结果。

我缺少什么才能获得我想要的行为？

所以我创建了一个名为 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));
    }
}

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))
});

获取列表的服务：

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));
    }
}

苗条组件：

<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>

Answer 1

当您使用空字符串初始化您的令牌存储时，订阅的组件将立即收到该值，这就是您看到此初始请求为空字符串的原因（即存储更新之前令牌的值使用实际令牌）。

为防止这种情况发生，您可以测试商店返回的值并采取相应措施：

    token.subscribe(t => {
        financialsPromise = t ? financialService.listFinancialInstitutions(t) : undefined;
    })

为了补充这一点，您还需要将承诺的呈现包装在条件中：

    {#if financialsPromise}
        {#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}
    {/if}

Answer 2

以上回答正确。我做了一个简单的例子来演示订阅是如何执行两次的。

https://svelte.dev/repl/b1fa28b592854900a62dd4b18ca5d6b9?version=3.44.2

如何使用来自另一个 HTTP 请求设置的可读存储的 header 'Authorization' 的值发出 HTTP 请求

How to make an HTTP request with the value for the header 'Authorization' coming from a readable store which is set by another HTTP request

svelte

svelte-store