Promise理解

133 阅读2分钟

作用

为了解决异步API回调地狱的问题

之前其实不是很理解promise的模型。

语法

1.需要传入一个函数作为参数,这个函数里面接受二个函数

2.resolve和reject的作用是改变状态,状态一旦改变就不可以更改

3.一旦状态更改,在then的 方法里面就会回调第一个函数(当执行resolve函数的时候)

4.这个函数是我们自己写的

单个的异步API

    `function cc() {
        return new Promise(function (resolve, rejects) {
            setTimeout(function () {
                console.log(11);
                resolve('123')
            })
        })
    }
    //我们在then里面要传入2个参数,这2个参数是函数体
    //当为resolve的时候会promise会回调第一个函数
    //同时通过内部的结构,将resolve的结果返回出来
    //而不是我以前以为的resolve就是then的第一个函数!
    cc().then(function (res) {
        console.log(res);
    })

多个异步操作

then的使用

原理:then会把返回的结果传到第二个函数,作为参数。

如果是return基本数据类型
    ```cc().then(res=>{
        return 1111
    }).then(res=>{
        console.log(res);//1111
    })```
    
return的是promise对象

会把promise对象执行的结果作为参数,传到第二个函数。 cc().then(res=>{ return cc1() }).then(res=>{ console.log(res);//222 cc1()的执行结果作为参数 })

也可以使用箭头函数简化

    ```cc().then(res=>cc1()).then(res=>{
        console.log(res);//也可以通过箭头函数写的更加简单
    })```

原理:then()方法返回的是一个promise对象,所以我们可以链式.then()达到多个调用的目的。

        function cc() {
            return new Promise(function (resolve, rejects) {
                setTimeout(function () {
                    console.log(11);
                    resolve('111')
                })
            })
        }
        function cc1() {
            return new Promise(function (resolve, rejects) {
                setTimeout(function () {
                    console.log(22);
                    resolve('222')
                })
            })
        }
        //then返回的是一个promise,可以持续.then()
        //在第一个resolve return不是promise对象,那么会把这个作为第二个then的参数
        //如果return的是promise对象,那么第二个then就会根据返回的promise对象的状态决定是resolve还是reject
        //同时他也会将新promise对象的结果作为参数输出
        cc().then(function (res) {
            console.log(res);
            return cc1()
        }).then(res=>{
            console.log(res);
        })

手写简单版的promise

              function Promise(executor) {
            let self = this;

            self.status = 'pending'
            self.success = undefined;
            self.error = undefined;

            function resolve(success) {
                if (self.status === 'pending') {
                    self.status = 'success'
                    self.success = success
                }
            }
            function reject(error) {
                if (self.status === 'pending') {
                    self.status = 'error'
                    self.error = error
                }
            }
            executor(resolve, reject)
        }
        Promise.prototype.then = function (onResolve, onReject) {
            let self = this;
            if (self.status === 'success') {
                onResolve(self.success)
            }
            if (self.status === 'error') {
                onReject(self.error)
            }
        }
        function cc() {
            return new Promise((resolve, reject) => {
                resolve('123')
            })
        }

        cc().then(res => {
            console.log(res);
        })```