Fetch api 在 webextensions 中不起作用答案

【问题标题】：Fetch api does not work in webextensionsFetch api 在 webextensions 中不起作用
【发布时间】：2017-11-06 14:06:56
【问题描述】：

我正在试验 Firefox 网络扩展。我想在提交表单后使用 fetch API 发出 HTTP 请求。问题是获取请求没有做任何事情。

这是从我的 manifest.json 中提取的数据：

"browser_action": {
    "default_popup": "test.html"
  },
"permissions": [
    "<all_urls>"
 ],

这是我的 test.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<form>
    <button type="submit">Submit</button>
</form>
<script src="test.js"></script>
</body>
</html>

这是我的 test.js：

document.querySelector("form").addEventListener("submit", fetchTest);
function fetchTest() {
    console.log("TEST");

    fetch('https://httpbin.org/get')
        .then(response => response.json())
        .then(response => {
            console.log(response);
            return response;
        })
        .catch(error => console.log(error));
}

当我单击表单的提交按钮时，我看到我的函数fetchTest 被调用，因为我可以在控制台中看到“TEST”消息。但是，“网络”面板中没有来自浏览器的请求，控制台中也没有错误，就好像 fetch() 从未发生过一样。

然后，我尝试用 xhr 做同样的事情：

function fetchTest() {
    console.log("TEST");

    const req = new XMLHttpRequest();
    req.open('GET', 'https://httpbin.org/get', false);
    req.setRequestHeader("Content-Type", "application/json");
    req.send(null);
    console.log(req);
}

使用此版本，一切正常。我在“网络”面板中看到了请求，并且我的控制台中有数据。

我是否使用了 fetch API 错误？

谢谢:)

【问题讨论】：

如果在 HTML 中将 type="submit" 替换为 type="button" 并在代码中将 "sumbit" 替换为 "click" 会有什么变化吗？至少在 Chrome 中使用submit 输入是个坏主意。也许FF对它更宽容，但值得一试。
谢谢，它似乎可以工作 :) 我找不到它不能与提交事件一起工作的原因。但是，现在每次单击字段时都会执行请求。我只是在提交按钮上添加了一个id，并在按钮上添加了事件监听器。
添加说明；我要求先进行测试，因为我不确定 Firefox 是否会有所不同。

标签： javascript firefox-addon fetch-api firefox-addon-webextensions

【解决方案1】：

当点击input of type submit 时，会导致提交：因为没有指定其他 URL，也没有其他表单元素，所以页面基本上会重新加载。引用 MDN：

<input>“提交”类型的元素呈现为按钮。当click 事件发生时（通常是因为用户单击了按钮），用户代理会尝试将表单提交给服务器。

您的基于fetch 的解决方案是完全异步的，这意味着您的代码启动，但在完成之前被重新加载中断。

您的基于 XHR 的解决方案成功了，因为您调用了 XHR 的同步形式（使用 false）；重新加载会停止，直到您的代码完成，然后它仍然会重新加载。

无论如何，您都不想重新加载，这会破坏您的 JS 状态；您可以通过从处理程序调用 e.preventDefault() 来阻止它，但从语义上讲，使用 submit 按钮而不是对其语义进行脑部手术更正确不。

使用<input type="button">（或者更好的是<button>）将是正确（且更简洁）的方法。引用 MDN：

<input type="submit"> 按钮用于提交表单。如果您想创建自定义按钮，然后使用 JavaScript 自定义行为，则需要使用 <input type="button">，或者更好的是 <button> 元素。

【讨论】：

感谢您的解释。现在它是有道理的:)