搭配 Promise 对象
·
Yin灏
Promise 对象的用法
let textfield = document.createElement('input');
textfield.id = 't01';
textfield.style.fontSize = '2em'
textfield.style.paddingLeft = '5px'
textfield.style.color = 'RoyalBlue'
textfield.value = 'ghrhguidfhgiudfhguifhugihfu'
document.body.innerHTML += '<p></p>'
document.body.appendChild(textfield)
let message_box = document.createElement('span')
message_box.id = 'mbox'
message_box.style.fontSize = '1.5em'
message_box.style.marginLeft = '15px'
document.body.appendChild(message_box)
textfield.focus()
let message_promise
function promise_executor(resolve, reject) {
if(t01.value != '') {
resolve('at most 12 characters')
} else {
reject('you have only 5 seconds to input!')
}
}
function positive(message) {
mbox.style.color = 'ForestGreen'
mbox.innerHTML = message
}
function negative(message) {
mbox.style.color = 'Pink'
mbox.innerHTML = message
}
function check_error() {
message_promise = new Promise(promise_executor)
// 允许的时候执行 positive
// 拒绝的时候执行 negative
message_promise.then(positive, negative)
}
setTimeout(check_error, 500)
聚集多个 Promise 对象
document.body.innerHTML += '<p></p>'
let textfield
for (let i = 1; i < 5; i++) {
textfield = document.createElement('input')
textfield.id = 't0' + i
textfield.style.width = '80px'
textfield.style.fontSize = '2em'
textfield.style.paddingLeft = '5px'
textfield.style.marginLeft = '5px'
textfield.style.color = 'RoyalBlue'
if(i == 1) {
textfield.value = 'test'
}
document.body.appendChild(textfield)
}
let message_box = document.createElement('span')
message_box.id = 'mbox'
message_box.style.fontSize = '1.5em'
message_box.style.marginLeft = '15px'
document.body.appendChild(message_box)
t01.focus()
let promise_array = [];
let filled = 0,
blank = 0;
let id_no;
function promise_executor(resolve, reject) {
let ref = document.getElementById('t0' + id_no);
console.log(ref);
if (ref.value != '') {
ref.style.borderColor = 'Green';
resolve();
} else {
ref.style.borderColor = 'Red';
reject();
}
}
function check_error() {
for (id_no = 1; id_no < 5; id_no++) {
promise_array[id_no - 1] = new Promise(promise_executor);
promise_array[id_no - 1].then(positive, negative);
}
Promise.all(promise_array).then(final_success, final_failure);
}
// 循环执行多次
function positive(value) {
filled++;
}
// 循环执行多次
function negative(value) {
console.log('value=', value);
blank++;
}
// 只执行一次
function final_success() {
mbox.style.color = 'ForestGreen';
mbox.innerHTML = 'All fields are filled'
}
// 只执行一次
function final_failure() {
mbox.style.color = 'Pink';
mbox.innerHTML = `${blank} Blank field is/are left ...`
}
setTimeout(check_error, 4000)
有一个被拒绝,整体都会被拒绝;所有都被允许,整体才能被允许。
异步函数与等待表达式
function calc(value) {
function promise_executor(resolve) {
setTimeout(resolve, 2000, value + 100)
}
return new Promise(promise_executor)
}
async function plus(value) {
let num01 = calc(20);
let num02 = calc(30);
return value + await num01 + await num02;
}
function positive(value) {
console.log('The value =', value);
}
let result = plus(10);
result.then(positive);
console.log('Promise object:', result); // The value = 260