ES6要点总结(3)-Promise异步编程解决方案

2018-06-24 01:53:21来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

Promise是ES6中新增的异步编程解决方案,体现在代码中它是一个对象,可以通过 Promise 构造函数来实例化。
其最基本的使用 new Promise(function(resolve,reject){})  传两个参数resolve和reject 然后再逻辑里返回resolve和reject

它有两个原型方法
Promise.prototype.then()
Promise.prototype.catch()
两个常用的静态方法
Promise.all()
Promise.resolve()
//一:原型方法
const imgs = [
    'http://wap.cmread.com/tingmedia/lingxi/image/head/default_head_logo.png',
    'http://wap.cmread.com/tingmedia//image/1/55/72.jpg',
    'http://wap.cmread.com/tingmedia//image/1/55/72.jpg'
];
var p=new Promise(function(resolve,reject){
    var img=new Image();
    img.src='http://wap.cmread.com/tingmedia//image/1/55/72.jpg';
    img.onload=function () {
        resolve(this);
    }
    img.onerror=function(){
        reject('加载失败')
    }
})
p.then(function (res) {
    console.log('加载成功');
    document.body.appendChild(res)
}).catch(function (error) {
    console.log('加载失败'+error)
})
//封装异步处理对象
function loadImg(url) {
    var promise=new Promise(function (resolve,reject) {
        var img=new Image();
        img.src=url;
        img.onload=function () {
            resolve(this)
        };
        img.onerror=function () {
            reject('加载失败')
        }
    });
    return promise
}
loadImg(imgs[0]).then(function (res) {
    document.body.appendChild(res)
})
//二:静态方法
//Promise.all()能将多个promise对象包装成一个新的promise对象,
//当所有promise对象都返回resolve时候,Promise.all()才返回resolve,此时所有resolve组成一个数组,返回给then中的resolve
//如果有一个返回reject则返回reject,并且把这个rejec返回给Promise.all的reject
var allDone=Promise.all([loadImg(imgs[0]),loadImg(imgs[1]),loadImg(imgs[2])])  //P要大写
allDone.then(function (res) {
    res.forEach(function (item,index) { //很多时候这个顺序不能错
        document.write(index);
        document.body.appendChild(item)
    })
})
//Promise.resolve()
//如果参数是promise对象则原封不动的返回promise对象
Promise.resolve(loadImg(imgs[0])).then(function (res) {
    console.log(111);
    document.body.appendChild(res)
})
//如果参数是对象,则立即会把这个对象变成promise对象,然后执行then方法
Promise.resolve({
    then(resolve,reject){
        const img=new Image();
        img.src=imgs[0];
        img.onload=function () {
            resolve(this)
        }
    }
}).then(function(res){
    document.body.appendChild(res);
    console.log(222)
})

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:one:arguments对象伪数组

下一篇:Windows 10 开发环境搭建