如何使用promises完成另一个Javascript函数？

Question

我希望在使用JS promises将值保存到数据库后刷新页面。

我的代码包装在jQuery事件监听器中：

$("img[class=okButton]").click(function(){
  var field_userid = $(this).attr("id");

  doThisFirst();

  // then make a promise
  const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
  wait(500).then(() => writeNewRoom(field_userid)); // function to write to database

  refreshPage(); // after write has finished
});

///////////////////

function writeNewRoom(field_userid)){
// ajax to do something;
}

///////////////////

function refreshPage(){
if(window.confirm("Click to refresh")){location = location}
}

预期的行为是先处理数据，然后在writeNewRoom（）函数中完成“做某事”，然后刷新refreshPage（）函数中的页面。

实际发生的情况是第一个doThisFirst（）函数已正确处理，但是第三个函数的window.confirm框在writeNewRoom函数运行之前弹出。

我以前从未使用过Promise，所以谁能帮忙找出问题所在？ 我从mozilla网站获取了基本语法： https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises

任何帮助深表感谢。

Answer 1

在您的情况下，您可能希望在writeNewRoom()方法中进行回叫。

例如，您完成了对.click()函数的所有需要​​执行的操作，并在完成对数据库的ajax调用后放置了.done()方法。

$("img[class=okButton]").click(function(){
    var field_userid = $(this).attr("id");

    doThisFirst();

    // Remove the Promise
    writeNewRoom(field_userid); // function to write to database
});

function writeNewRoom(field_userId) {
    $.ajax({
        url: "/someurl",
        method: "method",
        data: { 
          a: field_userId
       }
    }).done(function(data) {
        console.log('success', data) 
        refreshPage(); // This is where you refresh the page. 
    }).fail(function(xhr) {
        console.log('error', xhr);
    });
}

Answer 2

如果您// ajax to do something; 返回一个promise（jQuery.ajax（）可以），您可以这样做：

wait(500).then(() => writeNewRoom(field_userid))
         .then(() => refreshPage());

这里还有一个额外的括号function writeNewRoom(field_userid))

Answer 3

如果writeNewRoom(field_userid)正在执行ajax调用，则将refreshPage() -函数放入ajax调用的回调中，以便在ajax完成后执行它，例如：

function writeNewRoom(field_userid)){

   $.ajax({
       url: "someUrl",
       type: 'GET',
       success: (result) => { 
          refreshPage()    //when ajax has succeded, refresh page
       },
       error: (err) => {
        //do something else

       }
   });

}