手把手教你实现 Promise的使用方法

什么是 Promise

Promise 是 ES6 增加的一种异步编程的解决方案，它解决了回调函数嵌套带来的问题，使得异步操作更加简单、可读、可维护。

Promise 表示一个异步操作的最终状态（成功或失败），并且可以在这个异步操作完成后进行一些操作。一个 Promise 可以处于以下三种状态之一：

• Pending（进行中）
• Fulfilled（已成功）
• Rejected（已失败）

基本用法

Promise 的使用方法非常简单，它接受一个函数作为参数，这个函数的两个参数分别是 resolve 和 reject，表示异步操作成功和失败的回调函数。下面是一个最简单的 Promise 示例：

var promise = new Promise(function(resolve, reject) {
  // 异步操作
  if(异步操作成功) {
    resolve('成功');
  } else {
    reject('失败');
  }
});

promise.then(function(value) {
  // promise 成功回调
  console.log(value);
}, function(reason) {
  // promise 失败回调
  console.log(reason);
});

在创建 Promise 实例的时候，你需要传入一个函数，并把这个函数成为 executor 函数。executor 函数中包含异步操作，当异步操作执行成功的时候，执行 resolve；当异步操作执行失败的时候，执行 reject。

实例中使用了 then 方法来指定 Promise 实例状态改变后的回调函数，then 中接收两个参数，分别代表 Promise 成功和失败的回调。当 Promise 状态改为 Fulfilled 时会执行成功的回调，当 Promise 状态改为 Rejected 时会执行失败的回调。

示例一：基于 Promise 封装 AJAX

function getJSON(url) {
  return new Promise(function(resolve, reject){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      if(xhr.readyState === 4) {
        if(xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(xhr.statusText);
        }
      }
    };
    xhr.onerror = function() {
      reject(xhr.statusText);
    };
    xhr.responseType = 'json';
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.send();
  });
}

getJSON('/data.json').then(function(data){
  console.log('请求成功', data);
}).catch(function(error){
  console.log('请求失败', error);
});

示例中封装了一个 getJSON 函数，它传入一个 url 参数，并返回一个 Promise 对象。在 Promise 中进行 AJAX 请求，并通过 Promise 对象的 resolve 和 reject ，来对请求进行处理。

在最后使用 getJSON 函数时，只需要传入一个 url 参数，并在 then 和 catch 方法中回调成功和失败的状态即可。

示例二：Promise 的链式调用

Promise 的最大优势在于能够写出优雅的异步代码，使得代码不再回调地狱中，而是以链式调用的方式执行。

var promise1 = new Promise(function(resolve, reject) {
    resolve('success');
});

promise1.then(function(value) {
    console.log(value); // "success"
    return 'hello world';
}).then(function(value) {
    console.log(value); // "hello world"
    return new Promise(function(resolve, reject) {
        resolve('success');
    });
}).then(function(value) {
    console.log(value); // "success"
}).catch(function(error) {
    console.log(error);
});

在 Promise 的回调函数中，返回另外一个 Promise 对象，可以使用链式调用的方式依次执行。

总结

通过以上几个例子，我们可以看到 Promise 的使用方法非常简单，首先创建一个 Promise 对象，在 Promise 对象中进行异步操作并在异步操作结束时，通过 resolve 和 reject 函数分别控制异步操作的成功和失败。

然后在 Promise 对象的实例上，通过 then 和 catch 函数分别监听异步操作成功和失败后，进行一些列的后续操作。同时在后续的回调函数中，还可以通过返回另外一个 Promise 对象，结合 Promise 的链式调用使得异步编程更加优雅和简洁。