Javascript中的神器——Promise

简介

Promise是Javascript中一种用于异步操作的编程模式。它是一种能够更好地处理异步代码的方式，可以让我们更加容易地写出优雅、简洁的代码。在ES6中，Promise已经被正式引入了Javascript标准，它为异步编程提供了标准化的解决方案。

Promise的基本用法

通过Promise，我们可以将一个异步操作的结果封装成一个对象，这个对象可以被传递、组合、处理。Promise对象有三种状态：进行中 (pending)、已成功 (fulfilled) 和已失败 (rejected)。一旦Promise的状态改变，就不能再改变。

下面是一个简单的Promise示例：

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功');
  }, 1000);
});

myPromise.then(result => {
  console.log(result);  // "成功" 在1000毫秒后被输出
});

在上面的代码中，我们通过new Promise()创建了一个Promise对象，并给它传入一个函数。这个函数有两个参数：resolve和reject，分别表示异步操作成功和失败时要执行的函数。在我们的例子中，我们使用setTimeout来模拟异步操作，在1秒之后，通过resolve函数将异步操作的结果改变为"成功"。

Promise的链式调用

一个Promise对象可以被链式调用。通过在一个Promise对象的then方法中返回另一个Promise对象，我们可以将一系列的异步操作串联起来。以下是一个示例：

const firstAsyncOperation = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(10);
    }, 1000);
  });
};

const secondAsyncOperation = num => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(num * 2);
    }, 1000);
  });
};

firstAsyncOperation().then(result => {
  return secondAsyncOperation(result);
}).then(result => {
  console.log(result);  //20 在2000毫秒后被输出
});

在上面的代码中，我们定义了两个异步操作函数firstAsyncOperation和secondAsyncOperation，firstAsyncOperation返回一个Promise对象，将在1000毫秒后异步使用resolve函数将结果改为10，然后将结果传递给secondAsyncOperation。secondAsyncOperation返回一个Promise对象，并将结果改为第一个Promise对象的结果乘以2。最后，我们将第二个Promise对象的结果输出。

Promise的错误处理

Promise的错误处理通过catch方法来实现。在Promise的任何一个阶段抛出的错误都会被Promise捕获，并传递给catch方法。这样可以确保我们的代码不会崩溃。

以下是一个简单的Promise错误处理的示例：

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('失败'));
  }, 1000);
});

myPromise.then(result => {
  console.log(result);
}).catch(error => {
  console.log(error.message);  // "失败" 在1000毫秒后被输出
});

在上面的代码中，我们通过在setTimeout函数内抛出一个错误来触发Promise的reject函数。在Promise的catch方法中，我们捕获了这个错误并将其输出到控制台。

示例

示例1：利用Promise异步获取数据

在这个例子中，我们将异步获取一个网站上的数据，并输出到控制台上。

const url = 'https://jsonplaceholder.typicode.com/posts/1';

const getData = url => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
};

getData(url).then(result => {
  console.log(result);
}).catch(error => {
  console.log(error);
});

在这个示例中，我们使用了XMLHttpRequest来异步获取一个网站上的数据。我们创建了一个Promise对象，并使用resolve函数将请求的结果传递回调函数。如果请求成功，我们就在Promise对象的then方法中处理结果。如果请求失败，我们就在Promise对象的catch方法中处理错误。

示例2：利用Promise异步加载图片

在这个例子中，我们将异步加载一副图片，并在加载完成后输出到HTML页面上。

const imgUrl = 'https://picsum.photos/200';

const loadImage = imgUrl => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', () => reject('加载图片出错'));
    img.src = imgUrl;
  });
};

loadImage(imgUrl).then(img => {
  document.body.appendChild(img);
}).catch(error => {
  console.log(error);
});

在这个示例中，我们创建了一个Promise对象来处理异步加载图片的过程。在Promise对象的then方法中，我们将加载完成的图片添加到HTML页面上。如果出现错误，我们就在Promise对象的catch方法中处理错误。