如何在 Svelte 应用程序中使用 Axios 抓取 CSV？

Question

我是 Svelte 的新手，正在尝试弄清楚如何使用 Axios 获取 CSV。看起来应该很简单，但我没有运气。我尝试了一些不同的东西，但没有任何东西能让我得到我的数据。我肯定错过了什么？以下是 App.svelte 文件中的代码。（目前这是非常简单的）希望得到任何帮助。谢谢！

更新：我正在使用 Google Chrome 94 版和最新版本的 Axios ("axios": "^0.23.0")

此外，如果我使用 fetch

，我可以获取 csv

这是我遇到的错误：

error TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at mergeConfig (mergeConfig.js:92)
    at Axios.request (Axios.js:39)
    at Axios.<computed> [as get] (Axios.js:129)
    at Function.wrap [as get] (bind.js:9)
    at App.svelte:29

代码：

<script>
    import { geoAlbers, geoPath } from "d3-geo";
    import { onMount } from "svelte";
    import { feature } from "topojson-client";
    import axios from "axios";

    let nation, usstates;

    const projection = geoAlbers();
    const path = geoPath().projection(projection);

    let data;

    onMount(async function () {
        const response = await fetch(
            "https://unpkg.com/us-atlas@3.0.0/states-10m.json"
        );
        const json = await response.json();
        const land = feature(json, json.objects.nation);
        const states = feature(json, json.objects.states);

        nation = path(land);
        usstates = path(states);

        let data = [];
        let error = null;

        try {
            const locations = await axios.get(
                "https://docs.google.com/spreadsheets/d/e/2PACX-1vQOGtpeb5QsunVCaYXto2CGdYNOy5tDa42nZuTW198hswSmoTZUQv-LUAXMwpnSq76eHcV6aNO-Epya/pub?output=csv"
            );
            data = locations.data;
            console.log("data", data);
        } catch (e) {
            error = e;
        }
    });
</script>

<svg width="960" height="500">
    <path d={nation} class="border" />
    <path d={usstates} class="stateborder" />
</svg>

<style>
    svg {
        width: 960px;
        height: 500px;
    }
    .border {
        stroke: #444444;
        fill: #cccccc;
    }
    .stateborder {
        fill: "none";
        stroke: #fff;
        stroke-width: 0.5;
    }
</style>

Answer 1

您遇到错误了吗？您使用的是什么版本的 Axios？我可以看到您的 Google 文档 URL 正在发送 307 重定向，这可能是导致问题的原因。

https://github.com/axios/axios/issues/2429 指的是您可能遇到的情况。

你的代码适用于 Axios 0.21.4 和 Chrome 94。

如何在 Svelte 应用程序中使用 Axios 抓取 CSV？

How can I grab a CSV with Axios in a Svelte app?

csv

axios

svelte