JS中Promise的使用及封装方式

什么是Promise

Promise 是 JS 中一种处理异步操作的机制。在 Promise 中，异步操作被封装成了一个对象，可以通过 then() 方法来处理异步操作的返回结果。

Promise 提供了三种状态：pending（等待态）、fulfilled（完成态）和rejected（拒绝态）。

• pending：初始状态，既不是成功，也不是失败状态。
• fulfilled：代表操作成功完成，返回了对应结果。
• rejected：代表操作失败，返回对应错误信息。

通过使用 Promise，我们可以更清晰地表达异步操作的执行状态。

Promise的使用

基本用法

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

promise.then(function(value) {
  // 异步操作成功处理
}, function(error) {
  // 异步操作失败处理
});

在 Promise 中，我们通过传入一个函数的方式来定义异步操作。该函数包含两个参数：resolve 和 reject。当异步操作成功完成时，我们通过 resolve() 方法来返回操作结果，并在 then() 里面处理成功的结果；而当异步操作失败时，则通过 reject() 方法返回错误信息，并在 catch() 中处理错误。

Promise嵌套

Promise 的 then() 方法可以返回一个新的 Promise 对象，这样可以将多个异步操作串联起来执行，从而避免了回调地狱的情况。

promise1.then(function(result1) {
  return promise2;
}).then(function(result2) {
  return promise3;
}).then(function(result3) {
  // 所有异步操作完成，在此处处理结果
}).catch(function(error) {
  // 异步操作出错，在此处处理错误
});

Promise.all

Promise.all() 方法可以将多个 Promise 对象包装成一个新的 Promise 实例，包装后的 Promise 对象的状态由所有的 Promise 对象的状态共同决定。

Promise.all([promise1, promise2, promise3])
  .then(function([result1, result2, result3]) {
    // 所有异步操作完成，在此处处理结果
  }).catch(function(error) {
    // 异步操作出错，在此处处理错误
  });

如果其中一个 Promise 对象的状态为 rejected，则整个 Promise.all() 的状态也会变为 rejected，这时候只会执行 Promise.all() 中的 catch() 方法。

Promise的封装

将异步操作封装成 Promise 对象可以提高代码的可读性和可维护性，同时也更方便在各处调用。我们可以将封装好的 Promise 作为插件或者命名空间的一部分提供。

封装示例一

function ajax(url, method, data) {
  return new Promise(function(resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function() {
      if(xhr.readyState === 4) {
        if(xhr.status === 200) {
          resolve(xhr.response);
        } else {
          reject(new Error(xhr.statusText));
        }
      }
    };
    xhr.onerror = function() {
      reject(new Error('网络错误'));
    };
    xhr.send(JSON.stringify(data));
  });
}

// 使用示例：
ajax('/api/test', 'POST', {name: 'test'}).then(function(response) {
  console.log(response);
}).catch(function(error) {
  console.error(error);
});

我们可以将 ajax 函数封装成 Promise，返回一个 Promise 对象，然后在 then() 方法中处理成功的结果，在 catch() 方法中处理失败的情况。

封装示例二

let loadImage = function(url){
    return new Promise((resolve, reject)=>{
        let img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.onerror = function(){
            reject('加载失败');
        }
        img.src = url;
    });
}

// 使用示例：
loadImage('http://xxx.com/img.jpg').then(function(img) {
  console.log(img.width, img.height);
}).catch(function(error) {
  console.error(error);
});

我们可以将 loadImage 函数封装成 Promise，返回一个 Promise 对象，当图片加载成功时，在 then() 方法中返回 img 对象；当加载失败时，在 catch() 方法中返回错误信息。

总结

JS 中的 Promise 为我们处理异步操作提供了一种好的方法，其中封装的方式可以有多种，比如将异步操作封装成 Promise 函数、采用插件或者命名空间的方式等等，主要要考虑到代码的可读性和可维护性。