为什么我的 fetch POST 函数在 Svelte 中不起作用？

Question

我有一个 Svelte 应用程序，应该通过 Fetch API 对本地 JSON 文件执行 CRUD 操作。

“GET”操作按预期工作，但是当我尝试创建“POST”函数时，我收到以下错误消息：

Uncaught (in promise) Error: {#each} only iterates over array-like objects.
    at validate_each_argument (index.mjs:1977)
    at Object.update [as p] (index.svelte? [sm]:33)
    at update (index.mjs:1057)
    at flush (index.mjs:1025)

下面是index.svelte中的代码：

<script>
    import { onMount } from 'svelte';

    let data1 = '';
    onMount(async function () {
        const data = await (await fetch('http://localhost:5000/data1')).json();
        data1 = data;
        console.log(data);
    });
    const createData1 = async () => {
        const data =
            (await fetch('http://localhost:5000/data1'),
            {
                method: 'Post',
                body: JSON.stringify({
                    id: data1.length + 1,
                    text: '',
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            });
        data1 = data;
        console.log(data);
    };
</script>

<div style="display: grid; place-items:center;">
    <div class="horizontal">
        {#each data1 as d1}
            <div contenteditable="true">{d1.text}</div>
        {/each}
        <button type="submit" on:click|preventDefault={createData1}>+</button>
    </div>
</div>

以下是 JSON 文件的内容：

{
    "data1": [
        {
            "id": 1,
            "text": "blabla",
        },
        {
            "id": 2,
            "text": "bla bla",
        }
    ]
}

为什么没有创建对象？毕竟它在数组内部。

Answer 1

如您的日志所示，

data

是一个对象，而不是数组。

data.captions

是您要迭代的数组。

所以你需要在接近结束时稍微修改你的

createData

方法：

    const createData1 = async () => {
        ...
        // data1 = data;
        data1 = data.data1;
        console.log(data);
    };

Answer 2

在我看来，您需要稍微调整一下代码语法，并确保将响应转换为 JSON，然后您就可以开展业务了。这应该有效：

const data = (await fetch('http://localhost:5000/data1', {
  method: "POST",
  body: JSON.stringify({
    id: data1.length + 1,
    text: ''
  }),
  headers: {
    "content-type": "application/json"
  }
})).json();
data1 = data;

值得注意的调整是：

• 使用

  fetch

  重载，将第一个参数作为 URL，第二个参数作为请求选项对象（看起来这就是你想要的，并且抛出了一个额外的“（”字符）
• 确保将 POST 调用的结果转换为 JSON。您的“GET”请求完成此转换，您将得到您所期望的结果。