Promise 对象 使用详细教程

131 阅读3分钟

Promise 对象 使用详细教程 Promise 对象是一种用于处理异步操作的对象,它提供了一种更优雅的方式来处理异步代码,可以让我们更好地组织和控制异步操作。以下是 Promise 对象的详细教程和代码示例加注释:

  1. 创建 Promise 对象 使用 Promise 构造函数来创建 Promise 对象,构造函数接受一个函数作为参数,该函数接受两个参数 resolve 和 reject,分别表示异步操作成功和失败时的回调函数。
javascriptCopy code
let promise = new Promise(function(resolve, reject) {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve('操作成功');
  } else {
    reject('操作失败');
  }
});
  1. Promise 对象的状态 Promise 对象有三种状态:pending(等待中)、fulfilled(已成功)和 rejected(已失败)。当 Promise 对象创建后,它的状态为 pending,可以通过 resolve 或 reject 方法将其状态改变为 fulfilled 或 rejected。
javascriptCopy code
let promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('操作成功');
    // 或者
    // reject('操作失败');
  }, 1000);
});
console.log(promise); // 输出 Promise {<pending>}
promise.then(function(data) {
  console.log(data); // 输出 "操作成功"
}).catch(function(error) {
  console.log(error); // 输出 "操作失败"
});
  1. Promise 对象的 then 方法 Promise 对象有一个 then 方法,它接受两个参数,分别是成功和失败时的回调函数。
javascriptCopy code
let promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('操作成功');
    // 或者
    // reject('操作失败');
  }, 1000);
});
promise.then(function(data) {
  console.log(data); // 输出 "操作成功"
}, function(error) {
  console.log(error); // 输出 "操作失败"
});
  1. Promise 对象的 catch 方法 Promise 对象有一个 catch 方法,它接受一个回调函数,用于处理 Promise 对象的错误。
javascriptCopy code
let promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    // resolve('操作成功');
    reject('操作失败');
  }, 1000);
});
promise.then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.log(error); // 输出 "操作失败"
});
  1. Promise 对象的 finally 方法 Promise 对象有一个 finally 方法,它接受一个回调函数,该函数会在 Promise 对象的状态改变后被调用,无论 Promise 对象是成功还是失败。
javascriptCopy code
let promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    // resolve('操作成功');
    reject('操作失败');
  }, 1000);
});
promise.then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.log(error);
}).finally(function() {
  console.log('无论成功还是失败,我都会被调用');
});
  1. Promise.all 方法 Promise.all 方法接受一个 Promise 对象数组作为参数,返回一个新的 Promise 对象,该对象在数组中所有 Promise 对象都成功时才会成功,否则只要有一个 Promise 对象失败就会失败。
javascriptCopy code
let p1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('操作 1 成功');
  }, 2000);
});
let p2 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('操作 2 成功');
  }, 1000);
});
let p3 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    reject('操作 3 失败');
  }, 1500);
});
Promise.all([p1, p2, p3]).then(function(data) {
  console.log(data); // 输出 ["操作 1 成功", "操作 2 成功", "操作 3 失败"]
}).catch(function(error) {
  console.log(error); // 输出 "操作 3 失败"
});
  1. Promise.race 方法 Promise.race 方法接受一个 Promise 对象数组作为参数,返回一个新的 Promise 对象,该对象在数组中任何一个 Promise 对象成功或失败时都会立即返回。
javascriptCopy code
let p1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('操作 1 成功');
  }, 2000);
});
let p2 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('操作 2 成功');
  }, 1000);
});
let p3 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    reject('操作 3 失败');
  }, 1500);
});
Promise.race([p1, p2, p3]).then(function(data) {
  console.log(data); // 输出 "操作 2 成功"
}).catch(function(error) {
  console.log(error); // 输出 "操作 3 失败"
});