Promise

Promise 对象

Promise对象用于 解决 回调地狱 难以维护的问题，更加优雅的 使用回调函数。

在ES7 还有更加简便的 ：aysn / await

Promise的三种状态

一个 Promise 必然处于以下几种状态之一：
状态不可逆

• 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
• 已兑现（fulfilled）: 意味着操作成功完成。
• 已拒绝（rejected）: 意味着操作失败

Promise 常用的方法

promise 
	a)	then	参数为回调函数 成功时 result
	b)	catch	参数为回调函数 失败时 error
	c)	finally	参数为回调函数 任何情况
	d)	all 这个方法返回一个新的promise对象，该promise对象在iterable参数对象里所有的promise对象都成功的时候
		才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。这个新的promise对象
		在触发成功状态以后，会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值，
		顺序跟iterable的顺序保持一致；如果这个新的promise对象触发了失败状态，它会把iterable里第一个触发失败
		的promise对象的错误信息作为它的失败错误信息。Promise.all方法常被用于处理多个promise对象的状态集合
	e)	race 当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值
		或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象

个人练习

// Promise ******************
let p = new Promise((resolve,reject)={
    // 成功 resolve(value)
    // 失败 reject(erro)
})
// Promise 实例生成后，可以用then 方法分别制定resolve 和reject 状态
// 的回调函数
// sucess   用resolve
let p= new Promise((resolve,reject)=>{
    resolve('sucess')
})
p.then((res)=>{
    console.log(res)
})
// erro 用reject
let p= new Promise((resolve,reject)=>{
    reject(new Error('es'))
})
p.catch((erro)=>{
    console.log(erro)
})

// Promis.all()
let p1=Promise.resolve('a')
let p2=Promise.resolve('b')
let p3=Promise.resolve('c')
Promise.all([p1,p2,p3]).then((res)=>
    console.log(res)    // [ 'a', 'b', 'c' ]
)
// Promis.race()

// Promise 练习 在 promis_test.html

promise_test.html:

function ajax(url, callback) {
            let xmlhttp
            if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest()
            } else { // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
            }
            // 发送请求
            xmlhttp.open("GET", url, true)
            xmlhttp.send()
            // 服务端响应
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    //    console.log(xmlhttp.responseText)
                    let obj = JSON.parse(xmlhttp.responseText)
                    callback(obj)
                }
            }
        }

        // 回调地狱
        // ajax('../static/a.json', res => {
        //     console.log(res)
        //     ajax('../static/b.json', res => {
        //         console.log(res)
        //         ajax('../static/c.json', res => {
        //             console.log(res)
        //         })
        //     })
        // })

        // 改造成 Promise
        let getPromise=(url)=>{
            return new Promise((resolve,reject)=>{
                ajax(url,res=>{
                    resolve(res)
                },err=>{    // 为什么 可以有两个回调函数
                    reject(err)
                })
            })
        }

        getPromise("../static/a.json")
        .then(res=>{
            console.log(res);
            return getPromise("../static/b.json")
        }).then(res=>{
            console.log(res);
            return getPromise("../static/c.json")
        }).then(res=>{
            console.log(res);
        })
        .catch(err=>{
            console.log(erro);
        })

来自文章