理解JavaScript中Promise的使用

我会为你详细讲解理解JavaScript中Promise的使用的完整攻略。

什么是Promise

Promise 是异步编程的一种解决方案，是 ECMAScript 6 提供的新特性。

一个 Promise （承诺）代表着一个操作的未来结果。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当一个Promise对象的状态从pending变为fulfilled或rejected时，就会触发then()方法里的回调函数。

Promise的使用

创建Promise

Promise的构造函数接受一个函数作为参数，这个函数的两个参数分别是resolve和reject。resolve表示处理成功，reject表示处理失败。

let promise = new Promise(function(resolve, reject) {
  // 异步操作进行中...
  if (异步操作成功) {
    resolve(value);
  } else {
    reject(error);
  }
});

Promise的then方法

Promise实例具有then()方法，用来指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {
  // fulfillment
}, function(error) {
  // rejection
});

Promise的链式调用

then()方法返回的是一个新的Promise对象，可以进行链式调用。

promise.then(function(result) {
  return result + 1;
}).then(function(result) {
  return result + 2;
}).then(function(result) {
  console.log(result); // 6
});

Promise的错误处理

在then()方法后可以加一个catch()方法来处理错误。

promise.then(function(result) {
  // 成功
}).catch(function(error) {
  // 失败
});

示例

示例1：获取数据

先模拟请求数据

function getData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      let data = {
        name: '小明',
        age: 28,
        gender: 'male'
      };
      resolve(data);
    }, 1000);
  });
}

请求数据并输出：

getData().then(function(data) {
  console.log(data); // { name: '小明', age: 28, gender: 'male' }
}).catch(function(error) {
  console.log(error); // 如果获取数据时出错，则输出错误信息
});

示例2：多个异步操作嵌套执行

模拟异步请求的函数，我们可以看到第2次请求依赖于第1次请求：

function requestOne() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      let data = {
        id: 1,
        name: 'apple'
      };
      resolve(data);
    }, 1000);
  });
}

function requestTwo(id) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      let quantity = 5;
      resolve(quantity);
    }, 1000);
  });
}

多个异步操作嵌套执行并输出结果：

requestOne().then(function(result) {
  console.log(result); // { id: 1, name: 'apple' }
  return requestTwo(result.id);
}).then(function(result) {
  console.log(result); // 5
}).catch(function(error) {
  console.log(error); // 如果执行出错，则输出错误信息
});

最后，Promise的使用是基于异步操作的。我们可以将异步操作封装在Promise中，然后用then()方法来处理结果，或者用catch()方法来处理错误。