Einführung in die grundlegende Verwendung von Promise in ES6

Dieser Artikel bietet Ihnen eine Einführung in die grundlegende Verwendung von Promise in ES6. Ich hoffe, er wird Ihnen als Referenz dienen.

Promise ist eine Lösung für asynchrone Programmierung

1.es5 Rückruf

{
    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.Verkettungsoperation von 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-Methode

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

Beispiel: Nach dem Laden alle Bilder zur Seite hinzufügen

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

Beispiel: Nach dem Laden ein Bild zur Seite hinzufügen, den Rest in Ruhe lassen und nur das erste laden Bild wird angezeigt

{
    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. Spalte

2. Super warmer Code

3. Artikeldetails

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 Gepostet vor 1 Tag

[ES6 Erste Schritte 12]: VersprechenJavascript

es6

Frontend

19 Mal gelesen                                                             Das Lesen dauert 15 Minuten                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   

Grundlegende Verwendung von Promise

Promise ist eine asynchrone Programmierlösung

1.es5-Rückruf

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

{
    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 Methode

{
    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()Beispiel: Alle Bilder nach dem Laden zur Seite hinzufügen

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

Beispiel: Fügen Sie der Seite ein Bild hinzu, nachdem es geladen wurde, und ignorieren Sie den Rest. Nur das erste zu ladende Bild wird angezeigt.

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

                                 >

Bericht

Sie könnten interessiert sein

• 

• Kommentare                                                                             Nach Zeit sortieren

Laden...

Weitere Kommentare anzeigen

Das obige ist der detaillierte Inhalt vonEinführung in die grundlegende Verwendung von Promise in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!