我如何在Svelte应用程序中使用Axios抓取CSV？ [英] How can I grab a CSV with Axios in a Svelte app?

问题描述

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

推荐答案

您是否收到错误？您使用的是Axios的哪个版本？我可以看到您的Google Docs URL正在发送307重定向，这可能是导致问题的原因。

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

您的代码在Axios 0.21.4和Chrome 94上适用。

这篇关于我如何在Svelte应用程序中使用Axios抓取CSV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！