Promise笔记

promise的初衷是实现异步操作，支持链式回调，处理回调地狱；

实例对象属性

Promise的状态 [PromiseState]

pending 初始状态/未决定的

resolved/fulfilled 成功

rejected 失败

Promise 对象的值

保存对象【成功/失败】的结果

resolve 成功

reject 失败

Promise的方法

Promise.resolve;(value)=>{} value:成功的数据或promise对象

说明：返回一个成功/失败的promise对象

实例：

javascript 复制代码

let p1 = Promise.resolve(521);
    let p2 = new Promise((resolve, reject) => {
      resolve('success')
    })
    let p3 = Promise.resolve(new Promise((resolve, reject) => {
      resolve('ok')
    }))
    let p4 = Promise.resolve(new Promise((resolve, reject) => {
      reject('err');
    }))

    console.log(p1); //Promise {<fulfilled>: 521}
    console.log(p2); //Promise {<fulfilled>: 'success'}
    console.log(p3); //Promise {<fulfilled>: 'ok'}
    p4.catch(reason => {
      console.log(reason);//err
    })

Promise.reject;(reason)=>{} reason:失败的原因

说明：返回一个失败的promise对象，返回结果只能是一个失败的

实例：

javascript 复制代码

 let p1 = Promise.reject(521);
    // console.log(p1);//失败这样打印会报错
    p1.catch(reason => {
      console.log(reason);
    })
    let p2 = Promise.reject(new Promise((resolve, reject) => {
      reject('err');
    }))
    p2.catch(reason => {
      console.log(reason);
    })

Promise.all(常用);(promises)=>{} promises:包含n个promise的数组

说明：返回一个新的promise，只有所有的promise都成功才成功（返回PromiseState:fulfilled,PromiseResult:成功的结果），只要有一个失败就直接失败（返回PromiseState:rejected,PromiseResult:失败的结果）

实例：

javascript 复制代码

let p1 = Promise.resolve(521);
    let p2 = Promise.resolve('success');
    let p3 = Promise.resolve('成功');
    // let p4 = Promise.reject('err');

    let result = Promise.all([p1, p2, p3]);
    // let result = Promise.all([p1, p2, p4]);
    console.log(result);
    result.then(value => {
      console.log(value);
    }).catch(reason => {
      console.log(reason);
    })

Promise.rase(常用);(promises)=>{} promises:包含n个promise的数组

说明：返回一个新的promise对象，返回第一个完成promise的结果状态；如果所有 Promise 都拒绝，返回的 Promise 也将拒绝，拒绝的理由是一个聚合错误，包含所有 Promise 的拒绝理由。

实例：

javascript 复制代码

let p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(521)
      }, 1000)
    });
    let p2 = Promise.resolve('success');
    let p3 = Promise.resolve('成功');
    let p4 = Promise.reject('err');
    // let result = Promise.race([p1, p2, p3]);
    let result = Promise.race([p4, p2, p3]);
    console.log(result);

Promse.any;(promises)=>{} promises:包含n个promise的数组

说明：返回一个新的promise,返回第一个promise状态成功的结果，如果都没有成功则返回AggregateError类型的实例，它是Error的一个子类，用于把单一的错误集合在一起；

实例：

javascript 复制代码

let p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(521)
      }, 1000)
    });
    let p2 = Promise.resolve('success');
    let p3 = Promise.resolve('成功');
    let p4 = Promise.reject('err');
    let p5 = Promise.reject('fail');
    let result = Promise.any([p4, p5])
    // let result = Promise.any([p4, p2, p1])
    console.log(result);

使用与封装

面试问题

1.promise的状态是否可以改变，如果可以是如何改变的？

答：promise的状态是可以由初始状态pending转为resolved/rejected的状态；但是resolved与rejected之间的状态不能相互转化；

转化的方法：（1）resolve(value):由初始状态转化为resolved；

（2）reject(reason):由初始状态转化为rejected;

（3）抛出异常：例如使用throw由初始状态转化为rejected；

2.一个promise置顶多个成功/失败回调函数，都会调用吗（对于promise的结果使用console.log()与alert()等方法进行多个调用，当状态发生变化时都会进行调用吗）

答：当promise发生改变时对应状态都会调用；

3.改变promise状态和指定回调函数谁先谁后？（改变promise的状态指的就是在new Promise中通过结果来改变其状态；指定回调就是通过then()/catcch()对实例的promise进行回调处理）

答：1.都有可能。在正常情况下是先指定回调在改变状态，但是也可能先改变状态，在执行回调（因为二者是异步进行的，无法判断他们的执行时间）

2.如何先改变状态在指定回调？

（1）在执行器中直接调用resolve()/reject();(2)延长更长时间才调用then(),(在then中使用定时器等方法

)

3.什么时候才能获得数据（对于promise实例完成后传出的数据）

(1)如果先置顶回调，那么当状态发生改变时，回调函数就会调用，得到数据；

(2)如果先改变状态，那么当执行回调时，回调函数就会调用，得到数据；

4.promise.then()返回的新的promise的结果状态又什么决定？（let result = p1.then()中result也是一个promise,其状态又什么决定）

**简单表达：**由then()指定的回调函数执行的结果来决定
详细描述：

1.如果promise中的内容是抛出异常，新的promise状态为rejected,使用reason将异常抛出（例如使用console.log()进行结果展示）

2.如果返回的是有个非promise的任意值，新promise状态将变为resolve,使用value展示结果；

3.如果返回的是另一个新的promise,此promise的结果将会是新的promise的结果；

javascript 复制代码

// 指定回调：通过p1.then()回调实例
    // 改变状态，promise状态从初始状态转化为其他状态
    let p1 = new Promise((resolve, reject) => {
      resolve('success');
    })
    let result = p1.then(value => {
      // 1.抛出错误
      // throw '出了问题';
      // 2.返回的是一个非promise的任意值
      // return 521;
      // 3.返回结果是Promise对象
      return new Promise((resolve, reject) => {
        // resolve('success');
        reject('err');
      }, reason => {
        console.warn(reason);
      })
    })
    console.log(result);

5.promise如何串联多个操作任务？

1.promise的then()返回一个新的promise,可以写成then()的链式调用；

2.通过then的链式调用串联多个同步/异步任务；

javascript 复制代码

 let p = new Promise((resolve, reject) => {
      resolve('OK');
    })

    p.then(value => {
      return new Promise((resolve, reject) => {
        resolve('success');
      })
    }).then(value => {
      console.log(value);//success
    }).then(value => {
      console.log(value);//undefined
    })

6.promise异常传透？

1.当使用promise的then的链式调用时，可以在最后指定失败的回调；

2.前面任何操作了异常，都会传到最后失败的回调中处理；（在catch()中显示前面的异常原因）

7.中断promise链？

说明：当使用promise的then链式调用时，在中间中断，不在调用后面的回调函数；

办法：在回调函数中返回一个pendding状态的promise对象；

javascript 复制代码

 let p = new Promise((resolve, reject) => {
      resolve('success');
    })

    p.then(value => {
      console.log('111');
      // 中断链式的方法：返回一个初始状态的promise
      return new Promise(()=>{})
    }).then(value => {
      console.log('222');
    }).then(value => {
      console.log('333');
    }).catch(reason => {
      console.warn(reason);
    })

promise的常规使用

node读取文档内容

javascript 复制代码

const fs = require('fs');
// 原方法读取数据
// fs.readFile("./text/demo1.txt", (err, data) => {
//   if (err) throw err;
//   console.log(data.toString());
// })


// 使用promise读取数据
const p = new Promise((resolve, reject) => {
  fs.readFile("./text/demo1.txt", (err, data) => {
    if (err) reject(err);
    resolve(data.toString());
  })

})
p.then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
});

// 封装读取方法
const mineReadFile = function (url) {
  return new Promise((resolve, reject) => {
    fs.readFile(url, (err, data) => {
      if (err) reject(err)
      resolve(data.toString())
    })
  })
}

mineReadFile('./text/demo1.txt').then(value => {
  console.log(value);
}, reason => {
  console.log(reason);
})

使用promise调用ajax

javascript 复制代码

<button id="demo">点击请求</button>
  <script>
    // 原生使用
    let demo = document.querySelector("#demo")
    demo.addEventListener('click', () => {
      // 1.创建对象
      const xhr = new XMLHttpRequest();
      // 2.初始化
      xhr.open('GET', 'http://127.0.0.1/my/userList?page=1&pageSize=5&roleId=0');

      xhr.setRequestHeader('Authorization',
        'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsInBhc3N3b3JkIjoiIiwibmFtZSI6IueuoeeQhuWRmCIsInBob25lIjoiNjY2NjYiLCJ1c2VyUGljIjoiaHR0cDovLzEyNy4wLjAuMTo4MC9zdGF0aWMvaW1hZ2UxNzAxNjMyMDA2ODg1LmpwZyIsInJvbGVJZCI6MSwidXNlcl9waWMiOiIiLCJpYXQiOjE3MjcyNzA0MjAsImV4cCI6MTcyNzM1NjgyMH0.SAC-qFKdM0-iLnGO-8wUIf0UE_ylqcSNch8EGOg7hAc'
        )
      // 3.发送
      xhr.send();
      // 4.处理响应结果
      // 通常处理方法
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState === 4 && xhr.status === 200) {
      //     console.log(xhr.response);
      //   }
      // }

      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.response);
          } else {
            console.log(xhr.status);

          }
        }
      }

    })

    // 使用promise
    demo.addEventListener('click', () => {
      // 1.创建对象
      const p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        // 2.初始化
        xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
        // 3.发送
        xhr.send();
        // 4.处理响应结果
        // 通常处理方法
        // xhr.onreadystatechange = function () {
        //   if (xhr.readyState === 4 && xhr.status === 200) {
        //     console.log(xhr.response);
        //   }
        // }

        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              resolve(xhr.response)
            } else {
              reject(xhr.status)

            }
          }
        }
      })
      p.then(value => {
        console.log(value);
      }, reason => {
        console.log(reason);
      })
    })

    // promise封装方法
    const mineSendAjax = url => {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.send();
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              resolve(xhr.response);
            } else {
              reject(xhr.status);
            }
          }
        }
      })

    }
    demo.addEventListener('click', () => {
      mineSendAjax('https://jsonplaceholder.typicode.com/posts').then(value => {
        console.log(value);
      }, reason => {
        console.log(reason);
      })
    })
  </script>