如何在单击链接时执行http请求，修改href，然后按照href操作

Question

下面的代码允许我们在遵循a元素之前修改它的href：

<a href="/initial-link" onclick="modifyHref($event)" />
<script>
function modifyHref(event)
{
event.target.href = "/different-link";
return true;
}
</script>

我想实现上述行为，但在onclick处理程序中执行http请求。

例如：

<script>
function modifyHref(event)
{
httpClient.get('/my-data')
.then(function(response) {
event.target.href = "/different-link?id=" + response.data;
});
return true;
}
</script>

问题是http GET请求是异步的。在完成http请求之前，会跟随链接的原始href。

请注意，我不想用document.location.href重定向用户。我想使用a元素的href让用户导航。

Answer 1

首先，我相信您应该将单击事件更改为onclick="modifyHref(this)"，因为我们不太关心事件，而是关心它实际作用的元素。

接下来，onclick将触发锚before，但您需要通过从单击处理程序返回false来防止随后导航的默认行为。

function modifyHref(a) {
a.href = "https://www.google.com";
return false;
}

如果你查看这个沙盒，你会发现它实际上被谷歌(忽略了x帧问题(而不是原来的"；初始链接"；。