Cet article vous apporte une introduction à l'utilisation de base de Promise dans ES6. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
Promise est une solution pour la programmation asynchrone
Rappel 1.es5
{
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.Opération de concaténation de 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.méthode catch
{
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
}Exemple : Toutes les images sont chargées puis ajoutées à la page
{
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);
}Exemple : Il y a une image Ajoutez-la à la page après le chargement, ignorez le reste et affichez uniquement la première image chargée
{
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);
}
Publié il y a 1 jour
[ES6 Getting Started 12] : Promesse
javascript
es6
Front-end Utilisation de base de PromisePromesse 2.es6
Opération de concaténation 3.then() Méthode 4.catchPromise.all()
Exemple : Une fois toutes les images chargées, ajoutez-les à la page
Promise.race()Exemple : Ajouter une image à la page après son chargement et ignorer le reste. Seule la première image à charger est affichée🎜 >Rapport
{
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.代码复杂影响后期维护，很难一眼看出回调之间的顺序问题，代码难以阅读
}
{
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一样，但是代码可读性、可维护性更高
}
{
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
}Vous pourriez être intéressé
{
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
}{
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);
}{
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);
}
Chargement...
Afficher plus de commentairesCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
