前端学习（六十二） JavaScript-Promise（javaScript）

Promise，是ES6引入的一种标准化异步编程方案，承诺在未来某个时间交付一部操作的结果

Promise对象

一个Promise对象代表了一次异步操作
生成Promise对象后会立即执行，Promise有三个状态，分别是：Pending（代表执行完成之前），Fulfilled（代表执行成功），Rejected（代表执行失败）
Promise对象上有两个属性方法，分别是then()，catch()

创建Promise对象

通过new Promise()生成一个promise对象，并接受一个方法作为参数，并且，调用Promise后立即执行该方法

let a=new Promise(b)

b有两个参数，分别为resolve和reject，resolve将Promise对象变成为fulfilled状态，reject将Promise对象变成rejected状态

let timeout=new Promise((resolve,reject)=>{setTimeout(resolve,0)})

实例方法

then()：接受两个方法作为参数，分别用来指定成功状态和失败状态时的回调处理函数;

            timeout.then(value=>{
                console.log(value);
            },err=>{
                console.log(err);
            })

catch()：这种更常用接收一个方法作为参数，用来处理执行过程中的错误，相比，then的第二个回调函数，catch还能够不惑回调函数中的代码异常

            timeout.then(value=>{
                console.log(value);
            }).catch(err=>{
                console.log(err);
            })

Promise静态方法

创建Promise对象

Promise.resolve()，创建一个立即执行fulfilled的Promise对象

Promise.resolve()

等同于

new Promise(function(resolve){
    resolve('foo')
})

Promise.reject()，创建一个立即执行rejected的Promise对象

Promise.reject('foo')

等同于

new Promise(function(resolve,reject){
    reject('foo')
})

并行执行异步操作，并生成新的Promise对象

Promise.all()，接收一个数组作为参数，并且返回一个新的数组，

当数组中所有的对象都resolve时，新对象的状态变为fulfilled，并且所有新的对象的结果组成一个数组，并将新数组作为resolve的结果

            Promise.all([Promise.resolve('a'),Promise.resolve('b')]).then(function (value) {
                console.log(value);
            }).catch(function (err) {
                console.log(err); 
            })  //输出['a','b']

当数组中有一个对象reject时，新对象变为rejected，并且将当前rejected的原因当作新对象输出

            Promise.all([Promise.resolve('a'),Promise.reject('b')]).then(function (value) {
                console.log(value);
            }).catch(function (err) {
                console.log(err); 
            })  //输出b

Promise.race()，当数组中有一个对象resolve时，新对象状态变为fulfilled，当数组中有一个对象reject时，新对象状态变为rejected

例如我们可以使用race和promise的异步请求一起执行

            let promise=Promise.race([
                fetch('/url'),    //这个方法还不明白，晚点查
                new Promise((resolve,reject)=>{
                    setTimeout(()=>reject(new Error("超时错误")),5000)
                })
            ])
            promise.then(
                value=>{
                    //处理结果
                }
            ).catch(
                err=>{
                    //处理超时
                }
            )

实践方案

使用catch代替then方法的第二个参数

Promise以链式回调的方式避免回调地狱问题，如下

            fetch(url1,then(data=>{
                fetch(url2).then(data=>{

                }).catch(err=>{

                })
            })).catch(err=>{
                
            })

这种方式是不稳妥的，应该使用链式回调

            fetch(url1).then(data=>{
                return fetch(url2)
            }).then(data=>{
                //处理结果
            }).catch(err=>{
                //异常处理
            })

前端学习（六十二） JavaScript-Promise（javaScript）

猜你喜欢