Promise

Posted 2021-09-06 HUMILITY

promise

• ES6中一个非常好用和重要的特性
• Promise是异步编程的一种方案

• 什么时候用？

  • 一般情况下是有异步操作时，使用Promise对这个异步操作进行封装

  • Promise需传入俩个参数，resolve（成功时调用），reject（失败时调用）

        new Promise((resolve, reject) => {
            setTimeout(() => {
                // 成功的时候调用resolve
                // resolve(\'hello world\')
                // 失败的时候调用reject
                      reject(\'error message\')
                  }, 1000)
              }).then((data) => {
         // 1.100行处理的代码
         console.log(data);
         console.log(data);
         console.log(data);
         console.log(data);
         console.log(data);
         console.log(data);
              }).catch((err) => {
         console.log(err)
              })    //输出 error message
    

Promise三种状态

• 当开发中有异步操作时，就可以给异步操作包装一个Promise

• 异步操作之后会有三种状态

  • pending：等待状态，比如正在进行网络请求，或者定时器没有到时间
  • fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()

  • reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

            new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve(\'hlwd\')
                    reject(\'error\')
                },1000)
            }).then(data => {
                console.log(data);
            },err => {
                console.log(err)
            })
    

Promise的链式调用

    new Promise((resolve, reject) => {
        // 第一次网络请求的代码
        setTimeout(() => {
            resolve()
        }, 1000)
    }).then(() => {
        // 第一次拿到结果的处理代码
        console.log(\'hellowd\')
        console.log(\'hellowd\')
        console.log(\'hellowd\')
        console.log(\'hellowd\')
        console.log(\'hellowd\')
        console.log(\'hellowd\')

        return new Promise((resolve, reject) => {
            // 第二次网络请求的代码
            setTimeout(() => {
                resolve()
            }, 1000)
        })
    }).then(() => {
        // 第二次拿到结果的代码
        console.log(\'hellow\')
        console.log(\'hellow\')
        console.log(\'hellow\')
        console.log(\'hellow\')
        console.log(\'hellow\')
        console.log(\'hellow\')


        return new Promise((resolve, reject) => {
            // 第三次网络请求的代码
            setTimeout(() => {
                resolve()
            })
        },1000)
    }).then(() => {
        // 第三次拿到结果的代码
        console.log(\'hellowd\')
        console.log(\'hello\')
        console.log(\'hello\')
        console.log(\'hello\')
        console.log(\'hello\')
        console.log(\'hello\')
    })

• 简化代码方式：

    // 网络请求：aaa -> 自己处理（十行）
    // 处理：aaa111 -> 自己处理（十行）
    // 处理：aaa111222 -> 自己处理
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(\'aaa\')
        }, 1000)
    }).then((res) => {
        // 1.自己处理10行代码
        console.log(res, \'第一次的十行处理代码\');
  
        //2.对结果进行第一次处理
        return new Promise((resolve) => {
            resolve(res + \'111\')
        })
    }).then((res) => {
        console.log(res, \'第二次的十行处理代码\');
  
        return new Promise((resolve) => {
            resolve(res + \'222\')
        })
    }).then((res) => {
        console.log(res, \'第三次的10行处理代码\');
    })
    

    
    // SIMPLE WRITTEN
     new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(\'aaa\')
        }, 1000)
    }).then((res) => {
        // 1.自己处理10行代码
        console.log(res, \'第一次的十行处理代码\');

        //2.对结果进行第一次处理
        return Promise.resolve(res + \'111\')

    }).then((res) => {
        console.log(res, \'第二次的十行处理代码\');

        return Promise.resolve(res + \'222\')
    }).then((res) => {
        console.log(res, \'第三次的10行处理代码\');
    })
    
    // SIMPLE WRITTEN 2
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(\'aaa\')
        }, 1000)
    }).then((res) => {
        // 1.自己处理10行代码
        console.log(res, \'第一次的十行处理代码\');

        //2.对结果进行第一次处理
        return res + \'111\'

    }).then((res) => {
        console.log(res, \'第二次的十行处理代码\');

        return res + \'222\'
    }).then((res) => {
        console.log(res, \'第三次的10行处理代码\');
    })

    //报错
      new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(\'aaa\')
        }, 1000)
    }).then((res) => {
        // 1.自己处理10行代码
        console.log(res, \'第一次的十行处理代码\');

        //2.对结果进行第一次处理
        return Promise.reject(\'报错\')
        //or
        //throw \'报错\'


    }).then((res) => {
        console.log(res, \'第二次的十行处理代码\');

        return Promise.resolve(res + \'222\')
    }).then((res) => {
        console.log(res, \'第三次的10行处理代码\');
    }).catch((eerr) => {
        console.log(eerr);
    })
    

Promise的all方法

• 加入某一需求要发送两次请求才能完成

        Promise.all([
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(\'result\')
            }, 2000)
        }),
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(\'result2\')
            }, 1000)
        })
  
    ]).then(results => {
        console.log(results);
    })