찾다

집 >웹 프론트엔드 >JS 튜토리얼 >ES6의 Promise 기본 사용법 소개

ES6의 Promise 기본 사용법 소개

不言
不言앞으로
2018-10-29 15:20:424104검색

이 글은 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

Promise.all()

예: 모든 이미지가 로드된 후 페이지에 추가됩니다. 

{
    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.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);
}

              있음 칼럼

  1. 최고 온도 코드

  2. 기사 세부 정보







~ ~                                               ~ ~                                               ~ ~                                                                                                                                           ~                      ​ 프런트엔드
19번 읽었다                                                          읽는 데 15분 정도 걸립니다                                         ~ ~ ~                                                                                                                                                                                                                                                                                                       

Promise의 기본 사용법

Promise는 비동기 프로그래밍을 위한 솔루션입니다.

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.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 메소드
{
    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

es6 catch promise 异步
성명：
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：ES6의 Iterator 인터페이스에 대한 코드 예제 설명다음 기사：ES6의 Iterator 인터페이스에 대한 코드 예제 설명

관련 기사

더보기