目录
- 一、相关概念介绍
- 1.什么是Promise
- 2.Promise状态
- 3.创建Promise
- 4.then()方法
- 5.catch方法
- 6.链式调用
- 7.异步编程
- 二、使用
- 1.构造Promise
- 2.executor 函数
- 3.then() 方法
- 4.then() 方法返回的Promise的状态
- 三、Async/Await语法糖
- 四、Promise应用场景
- 五、总结
一、相关概念介绍
1.什么是Promise
在JavaScript中,Promise是一个用于进行异步编程的构造函数。它是ES6中引入的一个重要概念,用于处理异步操作。Promise是JavaScript中用于处理异步操作的对象,它代表了一个尚未完成但最终会完成或失败的操作。Promise的目的是以更优雅的方式书写复杂的异步任务,从而提高代码的可读性和可维护性。
2.Promise状态
Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成)和Rejected(已失败)。
- 当Promise被创建后,它的状态是Pending。
- 当操作成功完成,它的状态变成fulfilled,并传递一个值作为成功的结果。此时,then中的用于处理成功操作的回调会被执行。
- 当操作失败,它的状态变成rejected,并传递失败的原因。此时,then中的用于处理失败操作的回调会被执行。
3.创建Promise
通过构造函数创建一个Promise对象,构造函数接收一个函数作为参数,该函数的两个参数分别是resolve和reject。resolve函数的作用是将Promise对象的状态从Pending变为Resolved,在then方法中传入的回调函数会被调用。reject函数的作用是将Promise对象的状态从Pending变为Rejected,在catch方法中传入的回调函数会被调用。
4.then()方法
- Promise对象身上有then方法,可用来指定回调,对成功和失败的结果进行处理。
- then() 接受两个参数,一个处理成功状态的回调,另一个是处理失败状态的回调。
- then()返回的是一个Promise对象,支持链式调用。
- then()方法中不能改变Promise的状态。
5.catch方法
Promise对象的catch方法用于捕获链中的任何一步的错误。
6.链式调用
- then()和catch都会返回Promise对象,所以可以使用链式调用来处理多个异步操作,解决了多层嵌套的问题。
- 可以解决异步编程回调地狱的问题。
7.异步编程
在JS中,Promise是一个代表了异步操作最终完成或失败,及其结果值的对象。它允许开发人员为异步操作的成功和失败情况注册处理程序,极大地简化了异步编程的复杂性。
二、使用
1.构造Promise
javascript">new Promise(function(resolve,rejecrt)
{//异步操作//.......//操作成功resolve("success");
}).then(value=>{console.log(value);
});
Promise构造函数接受一个函数类型的参数executor,我们称executor为执行器函数。
2.executor 函数
- executor 函数在 Promise 构造函数中是作为一个参数被传入,并在 Promise 对象被创建后立即执行。 executor可以是用function申明的函数,也可以是箭头函数。
- executor 函数带有 resolve 和 reject 两个函数类型的参数 。当调用任意一个参数时,会改变 Promise 对象的状态。
- 异步操作成功时,调用 resolve 函数, Promise 对象的状态就会由 pending 变为 fulfilled(已兑现),并返回 executor 函数中 resolve 的参数(成功的值)。
- 异步操作失败时,调用 reject 函数, Promise 对象的状态就会由 pending 变为rejected(已拒绝),并返回 executor 函数中 reject 的参数(失败的原因)。
- executor 中抛出的任何错误都会导致 Promise 被拒绝,并且返回值将被忽略。
3.then() 方法
javascript">const p1= new Promise(function(resolve,rejecrt)
{setTimeout(() => {var currentSecond = new Date().getSeconds();//获取当前时间的秒数,若为偶数则操作成功,否则为操作失败if(currentSecond%2===0){//操作成功resolve(currentSecond);//p1的状态转变成fulfilledconsole.log(p1);}else{rejecrt(new Error(currentSecond));//操作失败,p1的状态转变成rejectedconsole.log(p1);}}, 1000);})
p1.then(value=>{console.log("success: "+value);//处理操作成功的情况})
.catch(error=>{console.error(error);//处理失败的情况
});
由运行结果可知:
- reject函数用于将Promise状态转成rejected状态,并传递一个原因作为失败的结果。
- resolve函数用于将Promise状态转成fulfilled状态,并传递一个值作为成功的结果。
- Promise状态转成fulfilled时,执行then方法。当状态转成rejected时,被catch捕获。
4.then() 方法返回的Promise的状态
下面的3段代码将讨论:根据回调函数返回值的不同类型,确定then() 方法返回的Promise对象的状态值。
第1种情况:promise操作成功,回调函数返回非Promise对象
javascript">const promise= new Promise(function(resolve,rejecrt)
{//操作成功resolve('success');//p1的状态转变成fulfilled
})
const p1=promise.then(value=>{//接受promise成功的回调return '345678'},reason=>{})
console.log(p1);
第二种情况:promise操作失败,回调函数返回非Promise对象
javascript">const promise= new Promise(function(resolve,rejecrt)
{//失败成功rejecrt('fail');//p1的状态转变成fulfilled
})
const p1=promise.then(value=>{},reason=>{return '123456'})
console.log(p1);
promise回调函数抛出异常
javascript">const promise= new Promise(function(resolve,rejecrt)
{//操作成功resolve('success');//p1的状态转变成fulfilled
})
const p1=promise.then(value=>{//在回调函数中抛出异常throw '出错了'},reason=>{})
console.log(p1);
promise回调函数返回Promise对象
javascript">const promise= new Promise(function(resolve,rejecrt)
{//操作成功resolve('success');//p1的状态转变成fulfilled
})
const p1=promise.then(value=>{//回调函数返回Promise对象return new Promise((resolve,rejecrt)=>{resolve('成功了');})},reason=>{})
console.log(p1);
根据上面的四种情况,我们可以得出结论如下:
- 1)promise操作成功,回调函数返回非Promise对象,p1的状态是fulfilled
- 2)promise操作失败,回调函数返回非Promise对象,p1的状态是fulfilled
- 3)promise回调函数抛出异常,p1的状态是rejected
- 4)回调函数的返回结果是promise对象,则p1的状态就取决于return返回的这个promise对象内部的状态,内部为resolve, 则p1状态为fulfilled,内部为reject,则p1状态为rejected
三、Async/Await语法糖
Async/Await是基于Promise的语法糖,使得异步代码的编写更加简洁和易于理解。使用async关键字声明异步函数,await关键字用于在函数中等待Promise的解析。await只能在async函数内部使用。
javascript">async function asyncFunction() {console.log("程序开始");const promise = new Promise((resolve, reject) => {setTimeout(() => {resolve("两秒后,耗时的任务操作成功");}, 2000);});const result = await promise; // 等待promise解析console.log(result); // 输出: Resolved
}console.log(asyncFunction()); // 调用异步函数
console.log('程序结束')
- async 标记的函数是个Promise对象。
- 如果表达式是promise对象并且状态为成功,那么await将返回的是这个promise对象成功的值。
- 如果表达式是promise对象,并且它失败了,那么就要通过try,catch进行捕获错误,不捕获错误那么后面代码无法执行.
四、Promise应用场景
- 定时器:可以使用 Promise 来管理定时器操作,譬如延迟执行某个任务或定时轮询服务器。
- Ajax 请求:使用 Promise 可以更方便地管理 Ajax 请求。例如,在使用 Fetch API ,Axios或其他 Ajax 库时,可以将异步操作封装在 Promise 中,以便更好地处理成功和失败的情况 。
- 文件操作:在文件的读、写或上传等操作时,Promise 可以提供更清晰的代码结构和错误机制处理。
五、总结
Promise 是一种用于处理异步操作的 JavaScript 对象,它提供了一种更清晰、更可靠的方式来管理异步代码。以下是 Promise 的主要特点和优势的总结:
- 简化异步操作:Promise 可以帮助我们更轻松地处理异步操作,以及在操作完成后执行相应的逻辑。
- 链式调用:链式调用使得多个异步任务能够顺序执行,每个任务的输出可以作为下一个任务的输入。这种方式大大提高了代码的可读性和可维护性。与嵌套回调相比,链式调用避免了多层嵌套,使代码更为扁平和直观。
- 错误处理机制:如果链式调用中任意一个 Promise 被拒绝(rejected),后续的 then() 将会跳过,直接进入下一个 catch()。这是 Promise 链中独特的错误处理机制,确保开发者能够集中处理异步操作中的错误。
- 异步任务的顺序执行:当我们需要依次执行多个异步操作时,链式调用可以提供非常简洁的代码结构。
- 避免回调地狱::Promise 可以解决回调地狱问题,使代码结构更加清晰和易于理解。Promise.then返回的也是一个promise对象,因此可以进行链式调用。这也是promise可以解决异步编程回调地狱的原因。