ホームページ > ウェブフロントエンド > jsチュートリアル > ES6 の Promise の基本的な使い方の紹介

ES6 の Promise の基本的な使い方の紹介

不言
リリース: 2018-10-29 15:20:42
転載
4116 人が閲覧しました

この記事では、ES6 での 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()

例: 読み込み後に 1 つの画像をページに追加し、残りは無視し、最初の画像のみを追加します。読み込む画像が表示されます

{
    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 入門 12】: 約束

ES6 の Promise の基本的な使い方の紹介javascript

es6# # #######フロントエンド###

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()

例: ロード後にページに 1 つの画像を追加し、残りは無視して、ロードされる最初の画像のみが表示されます。

{
    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 の基本的な使い方の紹介 に興味があるかもしれません#############################コメント###                                                                                            時間順に並べ替え

  • 読み込み中...

以上がES6 の Promise の基本的な使い方の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート