Javascript Promise 编程指南

介绍

Javascript Promise 是一个非常常用的编程模式，主要用于处理异步代码。在过去，我们在编写异步代码时会使用回调函数，但是使用回调函数有其自身的一些缺陷，例如代码可读性差、嵌套过深等问题。Promise 提供了一种更优雅的方式来解决这些问题。

Promise 的基础知识

Promise 的定义

在 Javascript 中，Promise 是一个对象，表示异步操作的最终完成（或失败）及其结果值。

Promise 的状态

Promise 有三种状态：Pending、Fulfilled 和 Rejected。

• Pending（进行中）：Promise 的初始状态，即异步操作还没有完成。
• Fulfilled（已成功）：异步操作已经完成，并且成功执行。
• Rejected（已失败）：异步操作已经完成，并且执行失败。

创建一个 Promise

可以使用 Promise 构造函数来创建一个 Promise。

const promise = new Promise(function(resolve, reject) {
  // 异步操作
  if(异步操作成功) {
    resolve('结果');
  } else {
    reject('错误');
  }
});

Promise 的链式调用

Promise 支持链式调用，这种编程模式被称为 Promise 链式调用。

promise.then(function(result) {
  // 处理成功结果
  return result;
}).catch(function(error) {
  // 处理失败结果
  return error;
}).finally(function() {
  // 无论成功或失败均可执行的函数
});

Promise 的进阶

Promise.all()

Promise.all() 方法将多个 Promise 实例包装成一个 Promise 实例。

当所有的 Promise 实例都返回结果时，Promise.all() 返回一个由所有 Promise 实例返回结果组成的数组。

当 Promise 实例中有一个 Promise 实例返回失败时，Promise.all() 直接返回失败结果。

Promise.all([promise1, promise2, promise3]).then(function(results) {
  // results 为数组，包含了所有 Promise 实例返回的结果值
}).catch(function(error) {
  // 任意一个 Promise 实例返回失败，就会执行 catch 方法
});

Promise.race()

Promise.race() 方法与 Promise.all() 方法类似，不同之处在于它只需要等待所有 Promise 实例中最快的返回结果，并返回该结果。

Promise.race([promise1, promise2, promise3]).then(function(result) {
  // result 为最快返回的 Promise 实例的结果值
}).catch(function(error) {
  // 任意一个 Promise 实例返回失败，就会执行 catch 方法
});

Promise 的应用场景

Ajax 异步请求数据

Promise 最经典的应用场景之一就是 Ajax 异步请求数据。

function getData(url) {
  return new Promise(function(resolve, reject) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = function() {
      reject('网络错误');
    };
    xhr.send();
  });
}

// 使用方式
getData('http://example.com/data.json').then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.error(error);
});

延迟执行代码

Promise 还可以用于延迟执行代码（类似于 setTimeout() 函数）。

function delay(time) {
  return new Promise(function(resolve) {
    setTimeout(resolve, time);
  });
}

// 使用方式
delay(1000).then(function() {
  console.log('1s 后执行');
});

获取多个异步操作结果

使用 Promise.all() 方法可以获取多个异步操作的结果。

const promise1 = new Promise(function(resolve) {
  setTimeout(function() {
    resolve('结果 1');
  }, 1000);
});

const promise2 = new Promise(function(resolve) {
  setTimeout(function() {
    resolve('结果 2');
  }, 2000);
});

const promise3 = new Promise(function(resolve) {
  setTimeout(function() {
    resolve('结果 3');
  }, 3000);
});

Promise.all([promise1, promise2, promise3]).then(function(results) {
  console.log(results); // ['结果 1', '结果 2', '结果 3']
});

总结

本篇文章从 Promise 的基础知识、进阶应用以及应用场景三个方面对 Promise 做了详细阐述。通过本篇文章的学习，我们可以更加深入地理解 Promise 的内在机制，并灵活应用 Promise 编程模式来处理各种异步代码。