Dieser Artikel bietet Ihnen eine Einführung in die grundlegende Verwendung von Promise in ES6. Ich hoffe, er wird Ihnen als Referenz dienen.
Promise ist eine Lösung für asynchrone Programmierung
1.es5 Rückruf
{
let ajax = function (callback) {
console.log('run1');
setTimeout(function () {
callback && callback.call();
}, 1000);
};
ajax(function () {
console.log('timeout1');
});
// 结果：立马输出 run1，1秒之后输出 timeout1
// 1.如果过程变得复杂，a()=>b()=>c()=>d()... ，用回调来处理会使代码变得复杂
// 2.代码复杂影响后期维护，很难一眼看出回调之间的顺序问题，代码难以阅读
}2.es6 Promise
{
let ajax = function () {
console.log('run2');
// 返回一个对象（Promise实例），这个实例具有then()方法，就是执行下一步的功能
return new Promise(function (resolve, reject) {
// resolve表示执行下一步操作 reject表示中断当前操作
setTimeout(function () {
resolve();
}, 1000);
});
};
ajax().then(function () {
// 这个方法对应resolve
console.log('timeout2');
}, function () {
// 这个方法对应reject
});
// 结果：立马输出 run2，1秒之后输出 timeout2
// 结果和es5一样，但是代码可读性、可维护性更高
}3.Verkettungsoperation von then()
{
let ajax = function () {
console.log('run3');
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, 2000);
});
};
ajax().then(function () {
// 返回Promise实例，通过不断的下一步下一步，实现了串联操作的结果
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, 3000);
});
}).then(function () {
console.log('timeout3');
});
// 结果：立马输出 run3，5秒之后输出 timeout3
}4.catch-Methode
{
let ajax = function (num) {
console.log('run4');
return new Promise(function (resolve, reject) {
if (num >= 5) {
resolve();
} else {
throw Error(`出错了，${num}小于5`);
}
});
};
// catch方法用来捕获异常
ajax(6).then(function () {
console.log(6);
}).catch(function (err) {
console.log(err);
});
// 结果：输出 run4 6
ajax(3).then(function () {
console.log(3);
}).catch(function (err) {
console.log(err);
});
// 结果：输出 run4 Error: 出错了，3小于5
}Beispiel: Nach dem Laden alle Bilder zur Seite hinzufügen
{
function loadImg(src) {
return new Promise((resolve, reject) => {
let img = document.createElement('img');
img.src = src;
// onload监听图片加载完成
img.onload = function () {
resolve(img);
};
// onerror监听图片加载失败
img.onerror = function (err) {
reject(err);
};
});
}
function showImgs(imgs) {
console.log(imgs); // [img, img, img] 三个img对象
imgs.forEach(function (img) {
document.body.appendChild(img);
});
}
// Promise.all 把多个Promise实例当做一个Promise实例
// Promise.all(array).then(fn),array对应多个Promise实例，当所有实例状态发生改变时，新的Promise实例才会跟着发生变化
// Promise.all也是返回Promise实例，所以也有.then()方法
// 当三张图片都加载完成，才会执行showImgs，如果其中有图片正在加载，不会执行showImgs，页面上看不到任何一张图片
Promise.all([
loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp'),
loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp'),
loadImg('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp')
]).then(showImgs);
}Beispiel: Nach dem Laden ein Bild zur Seite hinzufügen, den Rest in Ruhe lassen und nur das erste laden Bild wird angezeigt
{
function loadImg(src) {
return new Promise((resolve, reject) => {
let img = document.createElement('img');
img.src = src;
// onload监听图片加载完成
img.onload = function () {
resolve(img);
};
// onerror监听图片加载失败
img.onerror = function (err) {
reject(err);
};
});
}
function showImgs(img) {
let p = document.createElement('p');
p.appendChild(img);
document.body.appendChild(p);
}
// 当某一张图片率先加载完成，执行showImgs显示这张图片，剩余图片不再响应
Promise.race([
loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp'),
loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp'),
loadImg('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp')
]).then(showImgs);
}
Gepostet vor 1 Tag
[ES6 Erste Schritte 12]: Versprechen
Javascript
es6
Frontend Grundlegende Verwendung von Promise2.es6 Promise
{
let ajax = function () {
console.log('run2');
// 返回一个对象（Promise实例），这个实例具有then()方法，就是执行下一步的功能
return new Promise(function (resolve, reject) {
// resolve表示执行下一步操作 reject表示中断当前操作
setTimeout(function () {
resolve();
}, 1000);
});
};
ajax().then(function () {
// 这个方法对应resolve
console.log('timeout2');
}, function () {
// 这个方法对应reject
});
// 结果：立马输出 run2，1秒之后输出 timeout2
// 结果和es5一样，但是代码可读性、可维护性更高
}3.then() Verkettungsoperation4.catch Methode{
let ajax = function () {
console.log('run3');
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, 2000);
});
};
ajax().then(function () {
// 返回Promise实例，通过不断的下一步下一步，实现了串联操作的结果
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, 3000);
});
}).then(function () {
console.log('timeout3');
});
// 结果：立马输出 run3，5秒之后输出 timeout3
}Nach dem Login kopierenNach dem Login kopierenPromise.all()Beispiel: Alle Bilder nach dem Laden zur Seite hinzufügen{
let ajax = function (num) {
console.log('run4');
return new Promise(function (resolve, reject) {
if (num >= 5) {
resolve();
} else {
throw Error(`出错了，${num}小于5`);
}
});
};
// catch方法用来捕获异常
ajax(6).then(function () {
console.log(6);
}).catch(function (err) {
console.log(err);
});
// 结果：输出 run4 6
ajax(3).then(function () {
console.log(3);
}).catch(function (err) {
console.log(err);
});
// 结果：输出 run4 Error: 出错了，3小于5
}Nach dem Login kopierenNach dem Login kopierenPromise.race() {
function loadImg(src) {
return new Promise((resolve, reject) => {
let img = document.createElement('img');
img.src = src;
// onload监听图片加载完成
img.onload = function () {
resolve(img);
};
// onerror监听图片加载失败
img.onerror = function (err) {
reject(err);
};
});
}
function showImgs(imgs) {
console.log(imgs); // [img, img, img] 三个img对象
imgs.forEach(function (img) {
document.body.appendChild(img);
});
}
// Promise.all 把多个Promise实例当做一个Promise实例
// Promise.all(array).then(fn),array对应多个Promise实例，当所有实例状态发生改变时，新的Promise实例才会跟着发生变化
// Promise.all也是返回Promise实例，所以也有.then()方法
// 当三张图片都加载完成，才会执行showImgs，如果其中有图片正在加载，不会执行showImgs，页面上看不到任何一张图片
Promise.all([
loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp'),
loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp'),
loadImg('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp')
]).then(showImgs);
}Nach dem Login kopierenNach dem Login kopieren
Beispiel: Fügen Sie der Seite ein Bild hinzu, nachdem es geladen wurde, und ignorieren Sie den Rest. Nur das erste zu ladende Bild wird angezeigt.
{
function loadImg(src) {
return new Promise((resolve, reject) => {
let img = document.createElement('img');
img.src = src;
// onload监听图片加载完成
img.onload = function () {
resolve(img);
};
// onerror监听图片加载失败
img.onerror = function (err) {
reject(err);
};
});
}
function showImgs(img) {
let p = document.createElement('p');
p.appendChild(img);
document.body.appendChild(p);
}
// 当某一张图片率先加载完成，执行showImgs显示这张图片，剩余图片不再响应
Promise.race([
loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp'),
loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp'),
loadImg('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp')
]).then(showImgs);
}Bericht
Kommentare Nach Zeit sortieren
Das obige ist der detaillierte Inhalt vonEinführung in die grundlegende Verwendung von Promise in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
