HTTP Post 请求已取消答案

【问题标题】：HTTP Post Request canceledHTTP Post 请求已取消
【发布时间】：2020-06-30 10:45:07
【问题描述】：

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

当我查看一般标头时，没有执行任何发布请求

这就是将请求放在一起的 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>

为什么请求被取消？或者我该如何解决？

【问题讨论】：

标签： javascript java forms http-post

【解决方案1】：

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

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

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

希望对您有所帮助。

【讨论】：

【解决方案2】：

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

【讨论】：