JS中的Promise（秒懂如何使用promise进行异步操作）

一、Promise介绍

1.概念

2.状态

3.构造函数

4. then()方法

5.catch()方法

6.链式调用

二、Promise应用

构造 Promise

Promise 的构造函数

Promise的then的返回值

Promise 函数

三、Promise实例

四、Promise应用场景

五、总结

一、Promise介绍

1.概念

JavaScript中的Promise是一种用于处理异步操作的对象，它代表了一个尚未完成但最终会完成或失败的操作，目的是更加优雅地书写复杂的异步任务。

浏览器支持情况：

2.状态

Promise有三种状态：pending（待定）、fulfilled（已成功）和rejected（已失败）。
当一个Promise被创建时，它处于pending状态。
当操作成功完成时，Promise会转换为fulfilled状态，并返回一个值。
当操作失败时，Promise会转换为rejected状态，并返回一个原因（通常是一个Error对象）。

3.构造函数

Promise是通过构造函数创建的，其参数是一个执行器函数，该函数接受两个参数：resolve和reject。
resolve函数用于将Promise状态从pending转换为fulfilled，并传递一个值作为成功的结果。
reject函数用于将Promise状态从pending转换为rejected，并传递一个原因作为失败的结果。

4. then()方法

Promise对象具有then()方法，用于指定在Promise状态变为fulfilled或rejected时执行的回调函数。
then()方法接受两个参数：一个用于处理成功状态的回调函数，一个用于处理失败状态的回调函数（可选）。
then()方法返回一个新的Promise，允许链式调用。

5.catch()方法

Promise对象具有catch()方法，用于捕获Promise链中任何一步的错误。
catch()方法等效于then(null, onRejected)，用于处理Promise链中的rejected状态。

6.链式调用

由于then()方法和catch()方法都返回Promise对象，因此可以通过链式调用来处理多个异步操作。
这种方式使得异步代码的结构更清晰、更易读。

二、Promise应用

构造 Promise

现在我们新建一个 Promise 对象：

new Promise(function (resolve, reject) {
    // 要做的事情...
});

如果我想分多次输出字符串，例如第一次间隔 4 秒，第二次间隔3秒，第三次间隔2秒：

setTimeout(function () {
    console.log("First");
    setTimeout(function () {
        console.log("Second");
        setTimeout(function () {
            console.log("Third");
        }, 2000);
    }, 3000);
}, 4000);

这段程序实现了这个功能，但是它看起来非常复杂繁琐，那么接下来我们就用Promise来实现此功能：

new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log("First");
        resolve();
    }, 2000);
}).then(function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Second");
            resolve();
        }, 3000);
    });
}).then(function () {
    setTimeout(function () {
        console.log("Third");
    }, 4000);
});

Promise 的构造函数

下面是一个使用 Promise 构造函数创建 Promise 对象的例子：

当 Promise 被构造时，起始函数会被执行：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve('success');
    } else {
      reject('error');
    }
  }, 1000);
});
 
promise.then(result => {
  console.log(result);
}).catch(error => {
  console.log(error);
});

在上面的例子中，我们使用 Promise 构造函数创建了一个 Promise 对象，并使用 setTimeout 模拟了一个异步操作。如果异步操作成功，则调用 resolve 函数并传递成功的结果；如果异步操作失败，则调用 reject 函数并传递失败的原因。然后我们使用 then 方法处理 Promise 成功状态的回调函数，使用 catch 方法处理 Promise 失败状态的回调函数。

这段程序会直接输出 error 或 success。

resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，reject 是出现异常时所调用的：

new Promise(function (resolve, reject) {
    var a = 0;
    var b = 1;
    if (b == 0) reject("Divide zero");
    else resolve(a / b);
}).then(function (value) {
    console.log("a / b = " + value);
}).catch(function (err) {
    console.log(err);
}).finally(function () {
    console.log("End");
});

//输出结果为:
//a / b = 0
//End

Promise的then的返回值

// then方法是返回一个新的promise，这个新promise的决议是等到then方法传入的回调函数有返回值时，进行的决议
const promise = new Promise((resolve, reject) => {
    // reject()
    resolve("aaaaaaa")
})
// Promise本身就是支持链式调用
// then方法是返回一个新的Promise，链式中的then是在等待这个新的Promise有决议之后执行的
promise.then(res => {
    console.log("第一个then方法:", res)
    return "bbb"
}).then(res => {
    console.log("第二个then方法:", res)
    return "ccc"
}).then(res => {
    console.log("第三个then方法:", res)
}) .catch(err=>{

})

promise.then(res => {
    console.log("添加第二个then方法:", res)
}).catch()
promise.catch()


const newpromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("why")
    }, 3000);
})

newpromise.then(res => {
    console.log("第一个then方法:", res)
    // return newpromise
    // return "aaa"
    return{
        then:function(resolve){
            resolve("thenable ")
        }
    }
}).then(res => {
    console.log("第二个then方法:", res)
})

Promise 函数

计时器实例

//首先封装一个计时器函数
function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}
//应用此函数
print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});

三、Promise实例

模拟一个异步操作（在1秒后返回一个随机数）。如果随机数小于0.5，则将Promise状态设置为fulfilled，并通过resolve函数传递结果值；否则，将Promise状态设置为rejected，并通过reject函数传递错误原因。

// 创建一个简单的Promise实例
const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const randomNum = Math.random();
    if (randomNum < 0.5) {
      resolve(randomNum); // 操作成功，将Promise状态设置为fulfilled，并传递结果值
    } else {
      reject(new Error('Operation failed')); // 操作失败，将Promise状态设置为rejected，并传递错误原因
    }
  }, 1000);
});

// 使用Promise实例
promise
  .then((result) => {
    console.log('Operation succeeded:', result); // 处理操作成功的情况
  })
  .catch((error) => {
    console.error('Operation failed:', error); // 处理操作失败的情况
  });

四、Promise应用场景

Ajax 请求：使用 Promise 可以更方便地管理 Ajax 请求。例如，在使用 Fetch API 或其他 Ajax 库时，可以将异步操作封装在 Promise 中，以便更好地处理成功和失败的情况。
定时器：可以使用 Promise 来管理定时器操作，例如延迟执行某个任务或定时轮询服务器。
文件操作：在处理文件读取、写入或上传等操作时，Promise 可以提供更清晰的代码结构和错误处理机制。
处理回调地狱： Promise 可以解决回调地狱（Callback Hell）的问题，通过链式调用的方式使代码更加清晰和易于理解。
并行处理：使用 Promise.all() 方法可以并行处理多个异步操作，并在它们全部完成后执行某个操作。
模块加载：在使用模块加载器（如 RequireJS 或 SystemJS）时，可以使用 Promise 来管理模块的异步加载过程。
动画和 UI：在处理动画效果或用户界面交互时，Promise 可以用于管理异步操作，例如动画的开始和结束。
路由跳转：在前端单页应用程序（SPA）中，路由跳转通常涉及异步加载组件或数据，Promise 可以用于管理路由跳转的异步操作。

总的来说，Promise 可以在任何需要处理异步操作的场景中发挥作用，并且可以提供更清晰、更可靠的代码结构和错误处理机制。

五、总结

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

简化异步操作：Promise 可以帮助我们更轻松地处理异步操作，以及在操作完成后执行相应的逻辑。
链式调用：通过使用 .then() 方法，我们可以将多个异步操作链接在一起，形成一个链式调用，使代码更加清晰易读。
明确的状态变化：Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败），可以明确地表示异步操作的状态。
错误处理机制：Promise 提供了 .catch() 方法用于捕获异常和错误，并提供了更好的错误处理机制。
并行处理：使用 Promise.all() 方法，我们可以并行处理多个异步操作，并在它们全部完成后执行某个操作。
避免回调地狱：Promise 可以解决回调地狱问题，使代码结构更加清晰和易于理解。
广泛应用：Promise 在处理 Ajax 请求、定时器操作、文件操作、动画和 UI 交互等各种场景中都有广泛的应用。

总而言之，Promise 是一种强大的工具，可以帮助我们更好地处理异步操作，并提供了更清晰、更可靠的代码结构和错误处理机制。它是现代 JavaScript 开发中不可或缺的一部分。