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