JavaScript中的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

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() 方法

const p1= new Promise(function(resolve,rejecrt)
{
    setTimeout(() => {
        var currentSecond = new Date().getSeconds();
        //获取当前时间的秒数，若为偶数则操作成功，否则为操作失败
        if(currentSecond%2===0)
        {
            //操作成功
            resolve(currentSecond);//p1的状态转变成fulfilled
            console.log(p1);
        }
        else
        {
            rejecrt(new Error(currentSecond));//操作失败，p1的状态转变成rejected
            console.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对象

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

const promise= new Promise(function(resolve,rejecrt)
{
    //失败成功
    rejecrt('fail');//p1的状态转变成fulfilled
})
const p1=promise.then(value=>{},reason=>{
        return '123456'
    })
console.log(p1);

promise回调函数抛出异常

const promise= new Promise(function(resolve,rejecrt)
{
    //操作成功
    resolve('success');//p1的状态转变成fulfilled
})
const p1=promise.then(value=>{//在回调函数中抛出异常
        throw '出错了'
    },reason=>{})
console.log(p1);

promise回调函数返回Promise对象

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函数内部使用。

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可以解决异步编程回调地狱的原因。

到此这篇关于JavaScript中Promise用法大全的文章就介绍到这了,更多相关JS中Promise用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论