ES6语法：Promise的使用

什么情况下会用到Promise?
 一般情况下是有异步操作时,使用Promise对这个异步操作进行封装
 new -> 构造函数(1.保存了一些状态信息  2.执行传入的函数)
 在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数

 

 

网络请求的回调地狱，如下图：

 

 

 

本质上Promise将网络请求的代码和处理的代码做一个分离

 

 

数据是根据，resolve (data)  传递到 then (data)  ，resolve方法里面的值可以定义为其他名字

 

reject和catch 配合使用，处理异常，如下图：

 

 

Promise的三种状态

pending：等待状态，比如正在进行网络请求，或者定时器没有到时间

fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()

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

 

 

Promise的另外处理形式

 

 

 

 

Promise的链式调用

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

 

 

改造上面的代码

 

 

 

改造上面的代码

 

 

 

 

 

 

 Promise中all的方法使用

 

 

上面的setTimeout的方法 相当于下面 ajax

 

 

下面是浏览器打印的数据

 

 

 

 

需求，结合两个ajax