灏天阁

搭配 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

- Book Lists -