ホームページ > 記事 > ウェブフロントエンド > ES6 の Promise の基本的な使い方の紹介

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

不言転載: 2018-10-29 15:20:424084ブラウズ

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

# ポストする 1 日前に投稿

【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 の基本的な使い方の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

es6 catch promise 异步

声明：

この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：ES6のIteratorインターフェースのコード例解説次の記事：ES6のIteratorインターフェースのコード例解説

続きを見る

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

Promise.all()

Promise.race()

# ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃報告＃＃＃＃＃＃ ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

関連記事

# ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃報告＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃