为什么在尝试将作为文本接收的正文分配给 javascript 中的变量时出现未捕获类型错误：response.text 不是函数”错误

Question

I got a mock server who responds with a body text like this: "2020-05-02 2020-05-05 2020-05-07 2020-05-15 2020-05-16" then I try to insert each o these elements in an javascript array using this func:

<script>
    $(document).ready(function() {
        let response = fetch("http://127.0.0.1:35980/returnBalancesDates")
        let value =  response.text();
        var choices =  value.split(' ');
        console.log(choices)
        var x = document.createElement("SELECT");
        x.setAttribute("id", "mySelect");
        x.setAttribute("name", "oldbaldate");
        document.body.appendChild(x);

        for (i = 0; i < choices.length; i = i + 1) {
            var z = document.createElement("option");
            z.setAttribute("value", choices[i]);
            var t = document.createTextNode(choices[i]);
            z.appendChild(t);
            document.getElementById("mySelect").appendChild(z);
        }
        $(x).appendTo('#selectOldBalance');
    });
</script>

In browser console I see this error and my select element is not created in html page:

Uncaught TypeError: response.text is not a function
    at HTMLDocument.<anonymous> ((index):75)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)

Answer 1

Fetch is async, so when you call response.text() you actually dont have the response yet. Either use response = await fetch or callbacks.

Answer 2

I got a mock server who responds with a body text like this: "2020-05-02 2020-05-05 2020-05-07 2020-05-15 2020-05-16" then I try to insert each o these elements in an javascript array using this func:

<script>
    $(document).ready(function() {
        let response = fetch("http://127.0.0.1:35980/returnBalancesDates")
        let value =  response.text();
        var choices =  value.split(' ');
        console.log(choices)
        var x = document.createElement("SELECT");
        x.setAttribute("id", "mySelect");
        x.setAttribute("name", "oldbaldate");
        document.body.appendChild(x);

        for (i = 0; i < choices.length; i = i + 1) {
            var z = document.createElement("option");
            z.setAttribute("value", choices[i]);
            var t = document.createTextNode(choices[i]);
            z.appendChild(t);
            document.getElementById("mySelect").appendChild(z);
        }
        $(x).appendTo('#selectOldBalance');
    });
</script>

In browser console I see this error and my select element is not created in html page:

Uncaught TypeError: response.text is not a function
    at HTMLDocument.<anonymous> ((index):75)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)

Answer 3

This is the script that worked for me:

<script>
    $(document).ready(function() {
        fetch('http://127.0.0.1:35980/returnBalancesDates')
            .then(dataWrappedByPromise => dataWrappedByPromise.text())
            .then(data => {
        console.log(data)
        var choices =  data.split(' ');
        console.log(choices);
        var x = document.createElement("SELECT");
        x.setAttribute("id", "mySelect");
        x.setAttribute("name", "oldbaldate");
        document.body.appendChild(x);

        for (i = 0; i < choices.length; i = i + 1) {
            var z = document.createElement("option");
            z.setAttribute("value", choices[i]);
            var t = document.createTextNode(choices[i]);
            z.appendChild(t);
            document.getElementById("mySelect").appendChild(z);
        }
        $(x).appendTo('#selectOldBalance');
        });
    });
</script>