关于前端:Promise

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);
    })