ECMAScript6中的promise对象

　　在Javascript的异步编程中，经常可见promise对象，它是在EAMCScript6（2015）中才出现的新元素，也是异步编程中的一种解决方案或者规范。

　　它的出现，主要是为了避免回调地狱，也就是多层调用嵌套问题，使得异步编程代码更加简洁而易于阅读。

        const p=new Promise((resole,reject)=>{
            //执行任务......
            //根据任务执行情况，成功则执行resole函数,失败则执行reject函数
        }).then((value)=>(
            //执行了resolve函数则执行
        ),(reason)=>{
            //执行了reject函数则执行
        }).catch((error)=>{
            //捕捉错误并进行处理
        }).finally(()=>{
            //最后的处理
        })

　　1、promise实例有三种状态，分别是pending(准备中)、fulfilled(完成/成功)、rejected(失败/拒绝)。

　　2、promise只有执行了resolve函数或者reject函数，promise状态才可以改变，后续的then方法才可以继续执行。

　　3、promise中对应关系

　　resolve函数 => (value)=>{} => (value)=>{}

　　reject函数 => (reason)=>{} => (reason)=>{}

　　4、promise的状态只能改变一次

　　5、promise支持链式操作

        const p=new Promise((resolve,reject)=>{
                console.log("执行任务")
                resolve("成功的结果")
        }).then((value)=>{
            console.log("p1.then:"+value)
            return "OK1"
            },(reason)=>{
            console.log(reason)
            return reason
        }).then((value)=>{
            console.log("p2.then:"+value)
            return "OK2"
            },(reason)=>{
            console.log("错误提示："+reason)
            return reason
        })

　　6、为了代码清晰，最好使用catch进行错误捕捉，去掉(reason)=>{}部分。

　　比如，上面的代码可以改写：

        const p=new Promise((resolve,reject)=>{
                console.log("执行任务")
                resolve("成功的结果")
        }).then((value)=>{
            console.log("p1.then:"+value)
            return "OK1"   
        }).then((value)=>{
            console.log("p2.then:"+value)
            return "OK2"   
        }).catch((error)=>{
            console.log("错误提示："+error)
        })

        console.log(p)

　　7、执行reject函数、执行体代码出错、抛出错误异常都会被catch捕捉到。

　　8、Promise.all方法：(promises) => {}，返回一个新的promise，只有所有的promise都成功才成功，只要有一个失败则直接失败。

        let p1 = new Promise((resolve, reject) => {
            resolve('执行成功1')
        })

        let p2 = new Promise((resolve, reject) => {
            resolve('执行成功2')
        })

        let p3 = new Promise((resolve, reject) => {
            reject('执行失败')
        })

        Promise.all([p1, p2]).then((value) => {
            console.log(value)
        }).catch((error) => {
            console.log(error)
        })

        Promise.all([p1,p2,p3]).then((value) => {
            console.log(value)
        }).catch((error) => {
            console.log(error)
        })

　　输出结果：

　　9、Promise.race方法：(promises) => {}，返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态。

　　10、使用promise封装使用XMLHttpRequest对象来完成Ajax请求。

        function promiseAjax(url,para){
            const p=new Promise((resolve,reject) => {
            let xhr = newXMLHttpRequest()
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
            xhr.onreadystatechange = function(){
                if(xhr.readystate===4){
                    if(xhr.status>=200 && xhr.status<300){
                        resolve(xhr.responseText)
                }else{
                        reject(xhr.status)
                }
            }
            xhr.open('Post',url,true);
            xhr.send(para)
            })

            return p
        }

　　调用：

        promiseAjax("http://127.0.0.1/ES6_Base/ASD.php","Name=ASD&Password=123").then(value => {
            console.log()
            //执行后续处理
        },reason => {
            console.log(reason)
            //提示错误信息
        })

ECMAScript6中的promise对象

猜你喜欢