이 글은 ES6의 Promise의 기본 사용법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
Promise는 비동기 프로그래밍을 위한 솔루션입니다
1.es5 callback
{ 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.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 메서드
rreee예: 모든 이미지가 로드된 후 페이지에 추가됩니다.
{ 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); }
있음 칼럼
~
~
~ ~
~
~
~ 프런트엔드
19번 읽었다
읽는 데 15분 정도 걸립니다
~
~
~
Promise는 비동기 프로그래밍을 위한 솔루션입니다.
{ 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
}
4.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
}
Promise.all()예: 모든 이미지가 로드된 후 페이지에 추가합니다. {
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);
}
Promise.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(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); }
관심이 있으실 수도 있습니다
댓글
~ ~ 발진
위 내용은 ES6의 Promise 기본 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!