Promise异步编程解决方案

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)

})

巴特西

Promise异步编程解决方案

最新文章

热门文章