promise基本使用

promise 解决处理异步事件时的回调地狱(一堆{}分不清谁是谁)
使用:给异步操作包装一个promise
三个状态:

状态 语义
pending 等待状态,正在进行网络请求或计时器还没到时间等
fulfilled 满足状态,当主动回调了resole时就处于该状态 且会回调then()
rejected 拒绝状态当回调reject 时 且回调catch()

链式调用:

    <script>
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({
                        name: '233',
                        age: 23
                    }) //模拟ajax 返回的data
            }, 1000);
        }).then(res => {
            console.log(res); //结果 {message: '233',age: 23}
            // 把这个结果处理传给下一层
            res.name = '张三';
            //1.
            // return new Promise(resolve => {
            //     resolve(res)
            // })

            //2.
            // return Promise.resolve(res);

            //3.简写:其实底层还是封装一个promise
            return res;
        }).then(res => {
            console.log(res);
            // return Promise.reject('error!!!!');
            throw 'error!!!!'
        }).catch(err => {
            console.log(err);
        })
    </script>

多次请求不分先后 用promise.all

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

注意状态改变; 全为fulfilled 状态才fulfilled ,有一个rejected 状态为rejected

    <script>
        Promise.all([
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve({
                            name: '233',
                            age: 23
                        }) //模拟ajax 返回的data
                }, 1000);
            }),
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve({
                            name: '233',
                            age: 23
                        }) //模拟ajax 返回的data
                }, 1000);
            })
        ]).then(results => {
            console.log(results);
        })
    </script>

2021-10/15再探promise
Promise 承诺,一旦异步操作结束只有成功fulfilled或者失败rejected

fulfilled和rejected合在一起称为resolved(已定型)。

本质是要么成功要么失败,都返回一个Promise 使他能继续链式调用。

  1. then():

let me see this code

		function fn() {
            return new Promise((resolve, reject) => {
                //执行异步操作
                //成功resolve('someting')
                //失败reject("something or error")
                resolve('233')
            })
        }
        //console.log(fn());//Promise 
        fn().then((value) => {
            console.log(value)
        }, (reason) => {
            console.log(reason)
        });

then 返回的是一个新Promise。

 function fn() {
            return new Promise((resolve, reject) => {
                //执行异步操作
                //成功resolve('someting')
                //失败reject("something or error")
                reject('233')
            })
        }
        //console.log(fn());//Promise 
        fn().then((value) => {
            console.log(value)
            //dosomething forEaxmple 异步操作
        }, (reason) => {
            console.log("then:" + reason)
            //dosomething forEaxmple 异步操作
        }).catch((reason) => {
            console.log("catch:" + reason);
            //dosomething forEaxmple 异步操作
        })

会发现只允许then里面的方法,而catch 不再执行。

一般情况下不写then 里面的reject回调。 Promise
对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获

and
错误传递性

 function fn() {
            return new Promise((resolve, reject) => {
                //执行异步操作
                //成功resolve('someting')
                //失败reject("something or error")
                reject('1')
            })
        }
       fn().then((value) => {
                reject('2')
            })
            .then((value) => {
                reject('3')
            })
            .catch((reason) => {
                console.log(reason);
            })

catch()方法返回的还是一个 Promise 对象,因此后面还可以接着调用then()方法。
实质上 then(null,rejectcallBack)==catch()

  • finally()

finally()方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。

  • Promise.race()
    这与all差不多,不同的是:
const p = Promise.race([p1, p2, p3]);

只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。

  • Promise.allSettled()(2020)

用来确定一组异步操作是否都结束了(不管成功或失败)。所以,它的名字叫做”Settled“,包含了”fulfilled“和”rejected“两种情况。

返回值:

results 数组 ,每个成员是一个对象,对象的格式是固定的,对应异步操作的结果。

  • any()
    只要参数实例有一个变成fulfilled状态,包装实例就会变成fulfilled状态;如果所有参数实例都变成rejected状态
    1 ful stauts=>ful
    all reject stauts=>reject

  • Promise.resolve() /reject()

将现有对象转为 Promise 对象

你可能感兴趣的:(vue,es6,javascript)