抓取api在webextensions中不起作用 [英] Fetch api does not work in webextensions
问题描述
我正在试验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>提交< / button>
< / form>
< script src =test.js>< / script>
< / body>
< / html>
这里是我的test.js：
document.querySelector（form）。addEventListener（submit，fetchTest）;
函数fetchTest（）{
console.log（TEST）;
$ b fetch（'https://httpbin.org/get'）
.then（response => response.json（））
.then（response => {
console.log（response）;
return response;
}）
.catch（error => console.log（error））;
$ / code> 当我点击表单的提交按钮时，我看到我的函数因为我可以在控制台中看到TEST消息，所以调用 使用这个版本，一切正常。我在网络面板中看到了请求，并在控制台中显示了数据。 我使用fetch API错误吗？ 感谢：） 当输入 您的 你不想要重新加载，这会破坏你的JS状态;你可以通过从处理程序中调用 fetchTest 。然而，我没有来自网络面板的浏览器的要求，我没有在控制台中的错误，就好像fetch（）从来没有发生过。 >然后，我试图用xhr做同样的事情：
$ p $ function fetchTest（）{元素。
console.log 测试）;
const req = new XMLHttpRequest（）;
req.open（'GET'，'https://httpbin.org/get'，false）;
req.setRequestHeader（Content-Type，application / json）;
req.send（null）;
console.log（req）;
code $
submit 的输入，导致提交：由于没有指定其他URL，并且没有其他表单元素，页面基本上被重新加载。引用MDN：
< input> 作为按钮。当发生点击事件时（通常是因为用户点击了按钮），用户代理会尝试将表单提交给服务器。
< blockquote>
fetch - 基于解决方案是完全异步的，这意味着您的代码将会启动，但在重载之前会被中断完成。
$ b 基于XHR的解决方案成功了，因为您调用了XHR的同步形式（使用 false ）;重新加载是停滞的，直到你的代码完成，然后它仍然重新加载。
e.preventDefault（）来阻止它，但是在语义上它更正确 not 使用提交按钮，而不是对其语义进行脑部手术。 使用< input type =button> （或者更好的是，< button> ）是正确的（也是更清晰的）方法。引用MDN：
< input type =submit> 按钮是用于提交表单。如果你想创建一个自定义按钮，然后使用JavaScript自定义行为，你需要使用< input type =button> ，或者更好的是， code><按钮>
I'm experimenting firefox webextensions. I'd like to make HTTP requests using the fetch API after submitting a form. The problem is that the fetch request is not doing anything.
Here is the data extracted from my manifest.json:
"browser_action": {
"default_popup": "test.html"
},
"permissions": [
"<all_urls>"
],
Here is my 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>
And here is my 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));
}
When I click on the submit button of my form, I see that my function fetchTest is called because I can see the "TEST" message in the console. However, I have no requests coming from the browser in the "Network" panel, and I have no error in the console, it's as if the fetch() never happened.
Then, I tried to do the same thing with 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);
}
With this version, everything is working just fine. I see the request in the "Network" panel and I have the data in my console.
Am I using the fetch API wrong ?
Thanks :)
When an input of type submit is clicked, this causes a submit: since no other URL is specified, and no other form elements are there, the page is basically reloaded. Quoting MDN:
<input>elements of type "submit" are rendered as buttons. When theclickevent occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.
Your fetch-based solution is fully asynchronous, which means your code starts, but is interrupted by the reload before it is complete.
Your XHR-based solution succeeds, since you invoke a synchronous form of XHR (with false); the reload is stalled until your code finishes, then it still reloads.
You don't want a reload anyway, which destroys your JS state; you could prevent it by calling e.preventDefault() from the handler, but semantically it's more correct not to use a submit button instead of doing brain surgery on its semantics.
Using <input type="button"> (or better yet, <button>) would be the right (and cleaner) approach. Quoting MDN:
<input type="submit">buttons are used to submit forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use<input type="button">, or better still, a<button>element.
这篇关于抓取api在webextensions中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
