当前位置：首页 > news >正文

Promise笔记

news 2025/5/8 23:52:09

Promise笔记

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

实例对象属性

Promise的状态 [PromiseState]

pending 初始状态/未决定的
resolved/fulfilled 成功
rejected 失败

Promise 对象的值

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

Promise的方法

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

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

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对象，返回结果只能是一个失败的
实例：

 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:失败的结果）
实例：

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 的拒绝理由。
实例：

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的一个子类，用于把单一的错误集合在一起；
实例：

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的结果；

// 指定回调：通过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的链式调用串联多个同步/异步任务；

 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对象；

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

promise的常规使用

node读取文档内容

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

<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);}}}})// 使用promisedemo.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>