乐趣区

关于前端:Promise

jiezi

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);
  })
退出移动版