初识promise

一.什么是Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面管理着异步的操作,从它可以获取异步操作的消息.本身不是异步的，是里面管理的操作是异步的。

创建一个Promise
Promise对象是一个构造函数，用来生成Promise实例
promise 是一个构造函数，需要实例化对象，在promise构造函数内还会接收一个函数作为参数，函数还会有两个参数分别是

resolve
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”，在异步操作成功时，并将成功后的结果，作为参数传递出去

reject

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去

我个人的理解可以将Promise当作一个if语句，resolve就是if判断为true返回的内容，reject为else，也就是false时返回的结果

创建一个Promise

        let promise = new Promise(function(resolve, reject) {
            if (true) {
                let obj = {
                    name: '阎涛',
                    age: 18

                }
                resolve(obj)
            } else {
                reject('找不到')
            }
        })
     promise.then(function(res) {
            console.log(res);
        }, function(req) {
            console.log(req);
        })

二.Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前promise对象+是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

看下面代码
当代码执行到resolve时，promise的状态从进行中变成里已成功，而后面不管如何，都已经改变不了这个状态，所以下面的return false 不会生效，最后会将0输出

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

        return false;

    })

    // promise.then(function fn(res){
    //     console.log(res);
    // });
    promise.then((res)=>{
        console.log(res);
    });

三.Promise常用方法

Promise.then()
它的作用是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法

        let p = new Promise((resolve, reject) => {
            if (true) {
                resolve('000');
            } else {
                reject('1111');
            }
        })

        let p1 = p.then((re) => {
            console.log(re);
            // return '哈嘿';

        }, (er) => {
            console.log(er);
        });

        p1.then((re) => {
            console.log(re);
        }, (err) => {
            console.log(err);
        })
        

Promise.catch()
Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

如果Promise 对象对象状态变为resolved，则会调用then()方法指定的回调函数；如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。另外，then()方法指定的回调函数，如果运行中抛出错误，也会被catch()方法捕获。

        let promise = new Promise((resolve, reject) => {
            if (true) {
                resolve('成功')
            } else {
                reject('失败')
            }
        })

        promise.then(req => {
            console.log(req);
        }).catch(res => {
            console.log(res);
        })

通过Promise异步加载图片

function fn(url) {
            return new Promise((resolve, reject) => {
                // Image 对象代表嵌入的图像。 
                // <img> 标签每出现一次，一个 Image 对象就会被创建。 
                // 同理 , 创建一个Image对象，就会生成一个<img>标签
                // 总结：new image 就等于创建了个img标签
                let img = new Image()
                img.src = url
                img.onload = function() {
                    resolve(img)
                }
                img.onerror = function() {
                    reject(error)
                }
            })
        }
        let imgs = 'https://img1.baidu.com/it/u=2496571732,442429806&fm=26&fmt=auto&gp=0.jpg'

        fn(imgs).then(req => {
            document.documentElement.appendChild(req)
        }, res => {
            throw res
        })

promise.all

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例

Promise.all([promise实例1，promises实例2])

  function fn(url) {
            return new Promise((resolve, reject) => {
                let img = new Image()
                img.src = url
                img.onload = () => resolve(img)
                img.onerror = () => reject(error)

            })
        }

        let img1 = 'https://img1.baidu.com/it/u=2496571732,442429806&fm=26&fmt=auto&gp=0.jpg'
        let img2 = 'https://img2.baidu.com/it/u=3228549874,2173006364&fm=26&fmt=auto&gp=0.jpg'
        let img3 = 'https://img0.baidu.com/it/u=2151136234,3513236673&fm=26&fmt=auto&gp=0.jpg'

        //  使用Promise.all接收多个数据，注意添加时需要遍历
        Promise.all([
            fn(img1),
            fn(img2),
            fn(img3)
        ]).then(req => {
            for (let i in req) {
                document.documentElement.appendChild(req[i])
            }
        }).catch(res => {
            throw res
        })