JS中的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('程序结束')

1. async 标记的函数是个Promise对象。
2. 如果表达式是promise对象并且状态为成功，那么await将返回的是这个promise对象成功的值。
3. 如果表达式是promise对象，并且它失败了，那么就要通过try，catch进行捕获错误，不捕获错误那么后面代码无法执行.

四、Promise应用场景

1. 定时器：可以使用 Promise 来管理定时器操作，譬如延迟执行某个任务或定时轮询服务器。
2. Ajax 请求：使用 Promise 可以更方便地管理 Ajax 请求。例如，在使用 Fetch API ，Axios或其他 Ajax 库时，可以将异步操作封装在 Promise 中，以便更好地处理成功和失败的情况 。
3. 文件操作：在文件的读、写或上传等操作时，Promise 可以提供更清晰的代码结构和错误机制处理。

五、总结

Promise 是一种用于处理异步操作的 JavaScript 对象，它提供了一种更清晰、更可靠的方式来管理异步代码。以下是 Promise 的主要特点和优势的总结：

1. 简化异步操作：Promise 可以帮助我们更轻松地处理异步操作，以及在操作完成后执行相应的逻辑。
2. 链式调用：链式调用使得多个异步任务能够顺序执行，每个任务的输出可以作为下一个任务的输入。这种方式大大提高了代码的可读性和可维护性。与嵌套回调相比，链式调用避免了多层嵌套，使代码更为扁平和直观。
3. 错误处理机制：如果链式调用中任意一个 Promise 被拒绝（rejected），后续的 then() 将会跳过，直接进入下一个 catch()。这是 Promise 链中独特的错误处理机制，确保开发者能够集中处理异步操作中的错误。
4. 异步任务的顺序执行：当我们需要依次执行多个异步操作时，链式调用可以提供非常简洁的代码结构。
5. 避免回调地狱：：Promise 可以解决回调地狱问题，使代码结构更加清晰和易于理解。Promise.then返回的也是一个promise对象，因此可以进行链式调用。这也是promise可以解决异步编程回调地狱的原因。