Question

我正在尝试使用firefox webextensions。我想在提交表单后使用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是错误的吗？

谢谢：）

Answer 1

单击input of type submit时，会导致提交：由于未指定其他URL，并且没有其他表单元素，因此基本上会重新加载页面。引用MDN：

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

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

您的基于XHR的解决方案成功，因为您调用XHR的同步形式（false）;

表示重新加载会停止，直到您的代码完成，然后重新加载。

你不需要重新加载，这会破坏你的JS状态;您可以通过从处理程序调用{{1}}来阻止它，但从语义上来说，使用e.preventDefault()按钮而不是对其语义进行脑部手术是更正确的而不是。

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

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

Fetch api在webextensions中不起作用

1 个答案: