认识jQuery的Promise的具体使用方法

认识jQuery的Promise的具体使用方法

Promise 简介

Promise 是一种解决异步编程（尤其是回调地狱）的方法。它是一种抽象的概念，比较类似于邮递员把信件送到你手里的过程。

在 JavaScript 中，Promise 使用链式调用的方式解决回调地狱（callback hell）问题。Promise 有 3 种状态：pending（等待态）、fulfilled（成功态）、rejected（失败态），并且状态不可逆转，已经变成成功态或失败态就不会再变回等待态。

Promise 的具体使用方法

创建 Promise

创建 Promise，可以使用 Promise 构造函数，该构造函数接收一个函数作为参数，该函数接收两个参数：resolve 和 reject，分别称为 Promise 的两种状态。

const promise = new Promise((resolve, reject) => {
  // 这里编写异步任务
  // 异步任务的执行成功后调用 resolve，把结果传递给下一步
  // 异步任务的执行失败后调用 reject，把原因传递给下一步
});

Promise 的链式调用

Promise 的链式调用是指在一个 Promise 实例中，不断使用 then 或 catch 方法，实现多个异步操作的有序执行。then 方法接收两个参数：onFulfilled 和 onRejected，分别表示 Promise 成功态和失败态的回调函数。

promise
  .then(onFulfilled1, onRejected1)
  .then(onFulfilled2, onRejected2)
  .catch(onRejected3);

示例一：使用 Promise 计算数组的总和

使用 Promise 计算数组的总和，需要使用 Promise 构造函数创建 Promise 实例。Promise 实例接收一个异步任务，这个任务计算数组的总和，并把结果传递给 resolve 作为 promise 对象的状态。

const arraySum = arr => {
  return new Promise((resolve, reject) => {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
      sum += arr[i];
    }
    resolve(sum);
  });
};

const arr = [1, 2, 3, 4, 5];
arraySum(arr)
  .then(sum => {
    console.log(sum); // 15
  })
  .catch(error => {
    console.log('Error:', error);
  });

示例二：使用 Promise 实现延时操作

使用 Promise 实现延时操作，可以使用 Promise 的 setTimeout 方法，它在指定时间后，返回一个 Promise 实例。

const delay = (ms) => {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms);
  });
};

delay(1000)
  .then(() => {
    console.log('Hello, World!'); // 1s 后输出 "Hello, World!"
  })
  .catch(error => {
    console.log('Error:', error);
  });

本示例中，使用 delay 函数执行 setTimeout，让 Promise 延迟 1000ms 后返回一个成功态。随后，使用 then 方法处理成功态并输出字符串 "Hello, World!"。同时，如果出现错误，catch 方法也会进行处理。