ES6 Peomise详解

 如果你看了我的上一篇文章,也就是 jQuery.Deferred 那么这篇文章应该很好理解

点击查看~

/** 
 *  Promise
 * 这是一个简单的 promise
 * new Promise : 定义了一个 promise 对象 
 * resolve : 这是定义成功执行的回调函数
 * reject : 这是定义失败执行的回调函数
 * then : 传入两个函数, 一个是成功时候调用的函数, 一个是失败的时候调用的函数
 *        返回的必须是一个 Promise 实例, then 返回的默认就是 执行 then 函数的对象, 才可以链式操作
 */

var ajax = () => {
    console.log('1')
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve()
        }, 1000)
    })
}

ajax()
    .then(() => {
        return new Promise((resolve, reject) => {
            console.log('2')
            setTimeout(() => {

                resolve()
            }, 2000)
        })
    })
    .then(() => {
        console.log('3')
    })


/** 
 * promise 小 demo 打印图片的宽高
 */
function loadImg(src) {
    var promise = new Promise(function(resolve, reject) {
        var img = document.createElement('img')
        img.onload = function() {
            resolve(img)
        }
        img.onerror = function() {
            reject(img)
        }
        img.src = src
    })
}
var src = "//www.baidu.com/img/bd_logo1.png?where=super"
var result = loadImg(src)
result.then(function(img) {
    console.log("width", img.width);
    // return img 不然的话 会报错 错误是 height undefined .
    // 为什么是这样是因为 : 函数需要有返回值的啊.
    return img
}, function(img) {
    console.log("err 1");
}).then(function(img) {
    console.log("height", img.height);
}, function(img) {
    console.log("err 2");
})





// 定义一个 promise 函数,
function loadImg(src) {
    return new Promise((resolve, reject) => {
        let img = document.createElement('img')
        img.src = src
        img.onload = function() {
            resolve(img)
        }
        img.onerror = function(err) {
            reject(err)
        }
    })
}
// // 定义方法,用来添加到页面中
function showImgs(img) {
    img.forEach(item => {
        document.body.appendChild(item)
    });
}
// /** 
//  * all : 是当所有的都加载过之后才会执行.
//  */
Promise.all([
    loadImg(
        '//www.baidu.com/img/bd_logo1.png?where=super'
    ),
    loadImg(
        '//www.baidu.com/img/bd_logo1.png?where=super'
    ),
    loadImg(
        '//www.baidu.com/img/bd_logo1.png?where=super'
    )
]).then(showImgs)



/** 
 * 捕获成功时的异常 
 */

function loadImg(src) {
    return new Promise(function(resolve, reject) {
        var img = document.createElement('img')
        img.onload = function() {
            resolve(img)
        }
        img.onerror = function() {
            reject(err)
        }
        img.src = src
    })
}
var src = "//www.baidu.com/img/bd_logo1.png?where=super"
var result = loadImg(src)

result.then(function(img) {
    console.log("width", img.width);
    throw new Error('自定义错误') // 模拟异常.
    return img
}).then(function(img) {
    console.log("height", img.height);
}).catch(function(ex) { // 相当于 try...catch
    console.log(ex);
})


/**
 * 捕获失败时的异常
 */
function loadImg(src) {
    return new Promise(function(resolve, reject) {
        var img = document.createElement('img')
        img.onload = function() {
            resolve(img)
        }
        img.onerror = function() {
            reject("图片加载失败")
        }
        img.src = src
    })
}
// 手动把图片的地址改为异常,所以就会捕获到异常
var src = "//1www.baidu.com/img/bd_logo1.png?where=super"
var result = loadImg(src)

result.then(function(img) {
    console.log("width", img.width);
    return img
}).then(function(img) {
    console.log("height", img.height);
}).catch(function(ex) {
    console.log(ex); // 打印异常
})


/**
 * promise 串联
 */
function loadImg(src) {
    return new Promise(function(resolve, reject) {
        var img = document.createElement('img')
        img.onload = function() {
            resolve(img)
        }
        img.onerror = function() {
            reject("图片加载失败")
        }
        img.src = src
    })
}
var src1 = "//www.baidu.com/img/bd_logo1.png?where=super"
var result1 = loadImg(src1)
var src2 = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1299248511,111772763&fm=26&gp=0.jpg'
var result2 = loadImg(src2)

result1.then(function(img) {
    console.log('第一个图片加载成功', img.width);
    // 一定要 return 下一个 的对象 ,不然执行的还是 result1 的then
    return result2
}).then(function(img) {
    console.log('第二个图片加载成功', img.width);
}).catch(function() {
    console.log('加载失败');
})


/** 
 * Promise.all  和 Promise.race
 * all : 等到所有的 promise 都执行过才执行
 * race : 只要有其中一个 promise 执行后就执行
 */

function loadImg(src) {
    return new Promise(function(resolve, reject) {
        var img = document.createElement('img')
        img.onload = function() {
            resolve(img)
        }
        img.onerror = function() {
            reject("图片加载失败")
        }
        img.src = src
    })
}
var src1 = "//www.baidu.com/img/bd_logo1.png?where=super"
var result1 = loadImg(src1)
var src2 = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1299248511,111772763&fm=26&gp=0.jpg'
var result2 = loadImg(src2)
Promise.all([result1, result2]).then(function(datas) {
    console.log(datas[0]);
    console.log(datas[1]);
})
Promise.race([result1, result2]).then(function(data) {
    console.log('race', data);
})

/** 
 * 总结: promise 是一个构造函数
 * 状态 : promise 有三个状态 刚开始的时候时 待执行状态, 执行成功时的状态, 执行失败时的状态
 * 接受两个参数 : resolve reject 
 *               resolve : 定义执行成功时的回调函数
 *               reject : 定义执行失败时的回调函数
 * then : 传入两个函数, 一个是成功时候调用的函数, 一个是失败的时候调用的函数
 *        返回的必须是一个 Promise 实例, then 返回的默认就是 执行 then 函数的对象, 才可以链式操作
 * 捕获异常 : Error 和 reject 都要考虑
 * catch : 统一捕获异常,只需要再最后一个 then 的后面加上 catch 函数.
 *       : 这个就相当于 我们 try...catch 时一样的.
 * Promise.all : 用一个数组, 传入多个 promise ,等到所有的 promise 实例都加载完成之后, 再执行
 * Promise.race : 用一个数组, 传入多个 promise, 只要有一个 promise 实例加载完成之后, 就执行.
 * 多个串联 : 再上一个then 函数结尾的时候 return 下一个 promise 对象, 就可以达到串联
 */