HTTP Post 请求已取消

Question

我有一项 javascript 服务，可以将国家/地区添加到 postgresql 数据库的列表中。一切正常，但是当我在 chrome 开发工具中拉出网络选项卡时，post 请求未完成并且在状态栏中显示已取消。

当我看一般header没有post请求执行

将请求放在一起的 Javascript 代码如下所示：

function toevoegenLand(){
  document.querySelector("#toevoegen").addEventListener("click", function (){
  var formData = new FormData(document.querySelector("#toevoegform"));
  var encData = new URLSearchParams(formData.entries());
  
  var fetchoptions = {method: 'POST', body:encData, headers: {'Authorization' : 'Bearer ' + window.sessionStorage.getItem("sessionToken")}};
  
  fetch("restservices/countries/", fetchoptions)
  .then(response => response.json())
  .then(function(myJson){ console.log(myJson); });
  
  location.reload();
  
})

请求在WorldResource.Java

中处理

@POST
@RolesAllowed("user")
@Produces("application/json")
public Response addCountry(@Context SecurityContext sc, 
                           @FormParam("addCode")String c,
                           @FormParam("addCountry")String nm,
                           @FormParam("addCapital") String h,
                           @FormParam("addRegion") String r,
                           @FormParam("addOpp") double o,
                           @FormParam("addPop") int i,
                           @FormParam("addGov")String g,
                           @FormParam("addCon")String cn){
    
    Country newLand = service.saveLand(c, nm, h, r, o, i, g, cn);
    System.out.println(newLand);
    return Response.ok(newLand).build();
}

HTML形式没什么特别的

<form id="toevoegform">
            Code:<input type="text" id="addCode" name="addCode"><br>
            Land:<input type="text" id="addCountry" name="addCountry"><br>
            Hoofdstad:<input type="text" id="addCapital" name="addCapital"><br>
            Regio:<input type="text" id="addRegion" name="addRegion"><br>
            Oppvervlakte:<input type="text" id="addOpp" name="addOpp"><br>
            Inwoners:<input type="text" id="addPop" name="addPop"><br>
            Overheid:<input type="text" id="addGov" name="addGov"><br>
            Continent:<input type="text" id="addCon" name="addCon"><br>
            <button type="button" id= "toevoegen">Toevoegen</button>
            </form>

为什么请求被取消了？或者我该如何解决这个问题？

Answer 1

fetch("restservices/countries/", fetchoptions) .then(response => { response.json(); location.reload(); } ).then(function(myJson){ console.log(myJson); });

Answer 2

可能是因为您在请求完成之前重新加载了页面。改为这样做：

fetch("restservices/countries/", fetchoptions)
    .then(response => response.json())
    .then(function(myJson){
        // Here you are sure that your request has been done 
        location.reload();
    });

由于您正在处理 Promise（异步代码运行），您无法确定它会在以下指令之前执行。

希望对您有所帮助。

HTTP Post 请求已取消

HTTP Post Request canceled

javascript

java

forms

http-post