点击按钮处理同步和异步功能

Question

我的html页面中有一个按钮，点击该按钮，我想做两件事——启动进度条，然后在后台运行对RESTneneneba API的ajax调用来获取数据。如果我有一个同时做这两件事的方法，那么直到RESTneneneba API返回(我使用的是promise(，它才会返回，所以进度条的用途就丢失了。如何在单击按钮时同时调用这两个函数？

代码：

```javascript``` 
function showProgress(){
var x = document.getElementById("progressCircle");
if (x.style.display === "none") {
x.style.display = "block";
}
}

function loadData(){
var promise = new Promise(function(resolve,reject){
var req = {
url: urlWithData,
type: "GET",
async: false,
cache: false,
contentType: "text/xml",
dataType: "text",
success: function (data) {
resolve(data);
},
error: function (jqXHR, textStatus, errorThrown) {
loginfo("Failed to get the data from database" +
"textStatus: " + textStatus +
"errorThrown: " + errorThrown);
},
description: "Getting required data"
};
$.ajax(req);
});
return promise;
}
function getData(){
showProgress();
loadData().then(function(data){
// loading data in html way
}
}

```html```  
<oj-button id='retrieveData' disabled='false' on-oj-action='[[getData]]'>
<div class="oj-hybrid-padding">
<div class="oj-panel oj-panel-alt7 oj-margin" >
<h4 id="result"  data-bind="text:label_result_text"></h4>
<oj-progress id="progressCircle" type="circle" value="-1" style='display:none'></oj-progress>
<br/>
<pre id="dataReturned" style="pointer-events:none;"><oj-bind-text value="[[message]]"></oj-bind-text></pre>
</div>
</div>

Answer 1

如果我有一个同时做这两件事的方法，它不会返回，直到REST API返回(我使用promise(

是的。承诺可能尚未确定，但函数返回。如果它是一个async函数，它将返回一个promise。(如果您从REST API调用返回了对promise调用.then或.catch的结果，那么它也会返回promise。(

你还没有向我们展示你的代码，但你想要的是这样的：

function handler(evt) {
//           ^^^−−−−−− If you need it for anything
showProgressIndicator();
startRestAPICall()
.then(result => {
// Use the result
})
.catch(error => {
// Handle/display the error
})
.finally(() => {
hideProgressIndicator();
});
}

实时示例(使用setTimeout模拟REST API调用(：

function showProgressIndicator() {
document.getElementById("loading").classList.remove("hidden");
}
function hideProgressIndicator() {
document.getElementById("loading").classList.add("hidden");
}
function startRestAPICall() {
return new Promise(resolve => {
setTimeout(resolve, 1500, "this is the data");
});
}
document.getElementById("btn").addEventListener("click", handler);
function handler(evt) {
//           ^^^−−−−−− If you need it for anything
this.disabled = true; // Disable the button
showProgressIndicator();
startRestAPICall()
.then(result => {
// Use the result
const p = document.createElement("p");
p.textContent = result;
document.body.appendChild(p);
})
.catch(error => {
// Handle/display the error
const p = document.createElement("p");
p.className = "error";
p.textContent = String(error);
document.body.appendChild(p);
})
.finally(() => {
hideProgressIndicator();
this.disabled = false; // Re-enable the button
});
}

.hidden {
display: none;
}

<input type="button" id="btn" value="Click Me">
<div id="loading" class="hidden"><em>Loading...</em></div>

Answer 2

如果您正在显示加载条，那么这将起作用：

const buttonClick = () => {
showLoading() // function handling showing the bar on button click
$.ajax({ // jquery ajax just for representing ajax call, replace with your ajax call
'url' : 'http://myapi/api',
'type' : 'GET',
'data' : {
myData
},
'success' : function(data) {              
hideLoading() // function handling hiding the bar on success
},
'error' : function(request,error)
{
alert("Request: "+JSON.stringify(request));
}
});
}