When using Axios Vue.js background or Ajax request, the request is asynchronous, all requests simultaneously performed, then the latter performed randomly
To achieve synchronization be performed using async and await
Synchronous execution is required (i.e., a process parameter is followed by the return value of the previous method), was added in front of the parent layer async method, in front of the word and added to await layer method,
The method then returns Promise for an object with resolve () represents a successful execution,
async mounted() {
this.currentTime = parseTime(
new Date().toString(),
'{y}-{m}-{d} {h}:{i}:{s}'
)
await this.getOrgs()
await this.getQuDao()
await this.getProductList()
await this.queryData()
},
getOrgs() {
return newPromise((resolve,reject) => {
...
resolve(true)
})
}
getQuDao () {
return newPromise((resolve,reject) => {
...
resolve(true)
})
}
...
When the need to wait until all requests have successfully completed the request data, the operation can be used to do other methods Promise.All
initPage() {
const _amt = this.getData()
...
Promise.all([
_amt, _amtPie,
_amtRepay,_repayAmtPie,
_num, _intoPie,
_rate,_rateBar,
_map,_table
]).then(([_amt, _amtPie, _amtRepay, _repayAmtPie, _num, _intoPie, _rate,
_rateBar, _map, _table]) => {
...
})
.catch(() => {
...
})
}
getData() {
return new Promise((resolve,reject) => {
gethttpData({}).then(response => {
...
}).catch(err => {
...
})
})
}
Timer (1)
setTimeout executed only once after a specified time, as follows:
<script>
// timers run asynchronously
function hello(){
alert("hello");
}
// execution method using a method name
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout ( "hello ()", 3000); // use the string to perform a method
window.clearTimeout (t1); // timer removed
</script>
Timer (2)
setInterval a specified time of execution cycles, as follows:
// real-time refresh time in milliseconds.
setInterval('refreshQuery()',8000);
/ * Refresh * Query /
function refreshQuery(){
$("#mainTable").datagrid('reload',null);
}