Promise 对象在 javascript 原生异步处理中的应用

异步处理

在前端开发中，我们经常会遇到需要进行异步处理的情况。例如，向服务器请求数据，加载图片，或者执行一些需要等待的操作。在 JavaScript 中，实现异步处理通常采用回调函数的方式。由于回调函数嵌套和代码逻辑难以理解等问题，ECMAScript 6 引入了 Promise 对象来解决这些问题。

Promise 对象

Promise 是一种异步编程的解决方案，用于处理异步操作的结果。它表示异步操作的最终完成（或失败），并返回一个包含结果的对象。Promise 对象具有以下三种状态：

• pending: 初始状态，既不是成功也不是失败状态。
• fulfilled: 意味着操作成功完成，可以获得结果。
• rejected: 意味着操作失败，可以获取原因。

Promise 对象只有一次状态改变的机会，从 pending 到 fulfilled 或者从 pending 到 rejected，状态一旦发生改变就会保持不变。

Promise 基本语法

Promise 对象是一个构造函数，定义如下：

new Promise(function(resolve, reject) {
  // 异步处理
  if (异步处理成功) {
    resolve(value);
  } else {
    reject(error);
  }
});

• resolve()：将 Promise 对象的状态从 pending 转换为 fulfilled，并将异步操作的结果作为参数传递出去。如果异步操作没有返回结果，则可以将 null 作为参数传递给 resolve() 方法。
• reject()：将 Promise 对象的状态从 pending 转换为 rejected，并将异步操作的原因作为参数传递出去。

Promise 示例

我们可以用 Promise 来实现一个异步函数，例如读取一个远程服务器上的 JSON 数据。下面是一个示例代码：

function getJSON(url) {
  return new Promise(function(resolve, reject) {
    var req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.onreadystatechange = function() {
      if (req.readyState === 4) {
        if (req.status === 200) {
          try {
            var json = JSON.parse(req.responseText);
            resolve(json);
          } catch (e) {
            reject('JSON 解析错误');
          }
        } else {
          reject('发生错误:' + req.status);
        }
      }
    };
    req.onerror = function() {
      reject('发生网络错误');
    };
    req.send();
  });
}

上述代码中我们调用了一个名为 XMLHttpRequest 的 WEB API 来发起一个 GET 请求，并在状态发生变化时检查请求的状态和 HTTP 状态码。如果状态码为 200，则将 JSON 数据解析并将其传递到解析函数中，否则会将错误消息传递给拒绝函数。

下面是一个调用该函数的示例，我们可以通过 then() 方法来处理异步操作成功的结果，通过 catch() 方法来处理异步操作失败的结果。

getJSON('https://api.github.com/users/github')
  .then(function(json) {
    console.log('成功:', json);
  })
  .catch(function(error) {
    console.error('失败:', error);
  });

Promise 的优势

使用 Promise 对象可以使异步处理更加清晰和易于理解，从而提高代码的可读性、可维护性和可重用性。同时，Promise 难以出现回调函数嵌套和错误处理逻辑，从而避免了代码逻辑和错误处理上的混乱。

总结

Promise 对象是一种异步编程的解决方案，用于处理异步操作结果，具有三种状态。Promise 对象的优势在于使异步处理更加清晰和易于理解，从而提高代码的可读性、可维护性和可重用性。在日常前端开发中经常会用到 Promise 对象，掌握 Promise 对象的基本语法和用法也变得尤为重要。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65935a90eb4cecbf2d80c530