Javascript 为什么fetch只在不在函数中时执行？_Javascript_Api_Fetch

Javascript 为什么fetch只在不在函数中时执行？

javascript api

Javascript 为什么fetch只在不在函数中时执行？,javascript,api,fetch,Javascript,Api,Fetch,我正在学习Javascript/API调用&我在获取方面遇到了问题。当我从myFunction调用fetch函数时，它不会执行我能看到的任何操作，但是如果我将它从myFunction中取出，它将显示我期望的错误消息我试着用谷歌搜索这个，但没有找到任何对我有帮助的东西。我添加了console.log语句，以确保函数正在被调用，并且正在被调用我尝试将fetch语句从函数中取出，而只是将其作为脚本放到html文件中。那就好了。但是，我想使用javascript文件中函数的函数名来调用它&我想理解为

我正在学习Javascript/API调用&我在获取方面遇到了问题。当我从myFunction调用fetch函数时，它不会执行我能看到的任何操作，但是如果我将它从myFunction中取出，它将显示我期望的错误消息

我试着用谷歌搜索这个，但没有找到任何对我有帮助的东西。我添加了console.log语句，以确保函数正在被调用，并且正在被调用

我尝试将fetch语句从函数中取出，而只是将其作为脚本放到html文件中。那就好了。但是，我想使用javascript文件中函数的函数名来调用它&我想理解为什么它现在不能正常工作。我认为这与函数退出前fetch不返回有关，但我不确定

javascript函数：

function myFunction(){


    fetch('https://sickw.com/api.php?format=html&key=SOME_KEY&imei=12908438754328705&service=999999')
      .then(response => response.text())
      .then(data => {
        //document.write(data)
        console.log(data)
      });

    //make sure the function was called
    console.log("hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii");
}

function myFunction(event){
    event.preventDefault();

    fetch('https://sickw.com/api.php?format=html&key=SOME_KEY&imei=12908438754328705&service=999999')
      .then(response => response.text())
      .then(data => {
        //document.write(data)
        console.log(data)
      });

    //make sure the function was called
    console.log("hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii");
}

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Ghibli App</title>

  <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <div id="root"></div>

  <form>
    <select id="carrier">
      <option value="carrier">Carrier</option>
      <option value="icloud">iCloud</option>
    </select>
    <button onClick="myFunction('carrier');">Submit</button>"
  </form>

  <script src="scripts.js"></script>
</body>

</html>

我希望看到一个页面显示错误S01：服务ID错误！但是，当我从myFunction调用代码时，页面根本没有改变。

为什么你看不到任何东西：问题不在于您是在函数中调用fetch，而是在表单中单击一个按钮时调用该函数

将元素放置在元素内部时，其默认行为是提交表单，将结果发布到其他网页，并在浏览器中加载新页面。因为表单没有action属性，所以它只会重新加载当前页面。重新加载当前页面会导致您看不到任何结果

解决第一个问题：要防止表单返回，需要对传递给函数的事件调用preventDefault：

function myFunction(){


    fetch('https://sickw.com/api.php?format=html&key=SOME_KEY&imei=12908438754328705&service=999999')
      .then(response => response.text())
      .then(data => {
        //document.write(data)
        console.log(data)
      });

    //make sure the function was called
    console.log("hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii");
}

function myFunction(event){
    event.preventDefault();

    fetch('https://sickw.com/api.php?format=html&key=SOME_KEY&imei=12908438754328705&service=999999')
      .then(response => response.text())
      .then(data => {
        //document.write(data)
        console.log(data)
      });

    //make sure the function was called
    console.log("hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii");
}

第二个问题但是，由于调用此函数的方式，将其传递给HTML元素的onclick方法，因此您无法访问该事件。要纠正此问题，应使用addEventListener方法，如下所示：

document.getElementsByTagName("button")[0].addEventListener("click", myFunction);

如果您给按钮一个ID，则可以将其替换为：

document.getElementById("button-id").addEventListener(...)

第三个问题您将“carrier”直接传递给函数，但我猜您希望从元素中读取值。为此，应使用document.getElementById和.value读取选择：

var carrier = document.getElementById("carrier").value;

完成此操作后，可以在获取请求中使用carrier

第四期正如其他人在评论中已经提到的，您应该避免调用document.write。有一些书是关于为什么它不好的，但是正确的答案是使用domapi修改页面上的元素。例如：

var p = document.createElement("p");
p.innerHTML = data;
document.appendChild(p);

最终代码 index.html

您需要停止表单提交。您应该更改API密钥，不要使用document.write，请在加载页面后编写。我甚至想说，不要使用document.write。谢谢你的帮助！对于问题2，你是说我应该使用addEventListener而不是onClick来访问事件吗？@SamVentocilla完全正确。如果您使用addEventListener JavaScript方法，那么您的函数将被自动调用，并将事件作为其第一个参数，而不是使用onclick HTML属性，您可以使用该参数防止事件的默认行为提交表单。我需要对它进行测试以确定，但我认为作为一种解决方法，可以使用HTMLonClick属性并让函数返回false。在任何一种情况下，使用addEventListener都被认为是更好的做法，因为它可以将代码与视图分开。