Promise

Promise的介绍实际上我是没太看懂，大概的意思就是用来解决回调地狱。它作为一个对象，构造函数的参数要求是一个函数，而且这个函数的两个参数又分别是两个函数resolve 和 reject。

贴个代码看看：

let promise = new Promise(function (resolve, reject) {
        
});

因为我目前还处于学习理论阶段，没有接触过实际应用场景，所以解读promise很有困难。只能先做做笔记真正用到的时候再回来看。

我的理解大概是：在我们定义一个方法时，要在方法成功和失败时进行不同的处理，那么我们把这个方法的业务逻辑，写到promise对象的构造函数中。并且定义什么时候进行成功回调resolve 以及 什么时候进行失败回调 reject。然后在定义这个方法时，创建promise对象并且返回。

那么实际使用这个方法时，可以直接在后面通过 xxx.then()  或者 xxx.catch() 来进行成功处理或失败处理。

看看实际使用：我们定义imgLoad()方法，通过传src参数实现图片的加载。

    // 加载图片 return promise
    function imgLoad(src) {
        return new Promise(function(resolve, reject) { 
            let img = document.createElement('img'); 
            img.className = 'm-img'; 
            img.src = src; 
            img.onload = function(){    //img的内置方法,在图片成功加载时调用。
                resolve(img);           //resolve会把img返回到外面,也就是.then()时使用,是一个 
                                        //隐藏传递
            };
            img.onerror = function(err){ 
                reject(err); 
            }; 
        }); 
    }

第一次看这段代码十分蒙圈，我理了一下思路。img.onload()是js给img元素的内置方法，会在图片加载成功调用你自己定义的方法。也就是说调用onload时，我们要进行成功操作，在promise里就是告诉resolve开始整活。这个resolve直接对应实际使用时调用的 .then() 方法。

.then() 方法同样需要一个函数作为参数，这个作为参数的函数会在 主方法成功(在这里就是图片执行onload的时候) 时调用。那么我们在promise对象中给resolve设置的参数，此时会隐示传递给这个作为then参数的函数。。。结合代码比较好理解

    // 定义成功回调函数，将单个图片添加到界面上
    function showImg(img){
        console.log(123);
        let p = document.createElement('p');
        p.appendChild(img);
        document.body.appendChild(p);
    }

 

// 调用，使用then处理结果（应该还使用catch捕获异常，这里省略）
imgLoad('http://qpzo4o916.hn-bkt.clouddn.com/dog.jpg').then(showImg);

 

 

那么我总结一下promise的语法。。

1、定义方法，在这个方法里我们直接retern一个用new关键字创建的promise对象。

这个promise的构造方法写成 new Promise(function (resolve, reject)) {  xxx  }。   -->   xxx是我们具体想要实现什么业务的代码

要注意的是 resolve, reject 是两个函数。

业务代码写完之后，开始判断最终业务逻辑处理是否成功。

如果是成功的，那么就写 resolve(aaa);       // 这个aaa一般是我们在前面代码处理业务时用的参数

如果失败了，写 reject(error);

2、调用这个方法 ， 具体写法： xxx().then(  fff ).catch(  eee );

      在这个方法执行成功时，会去执行then里的函数fff；这个时候fff的入参就是  resolve(aaa)  的 aaa。

      同样失败的话会执行catch里的函数eee；这个时候eee的入参就是的 reject(error) error。

3、定义fff  和  eee 就不用说了。。。