JavaScript中Promise的使用方法实例

下面就是关于“JavaScript中Promise的使用方法实例”的完整攻略。

什么是Promise?

Promise 是一种异步编程的解决方案，它解决了回调函数嵌套引起的代码可读性差、容易出错和难以维护的问题。通过 Promise，可以更加优雅、可读、容错的编写异步代码。

Promise 的基本语法结构如下：

new Promise(function(resolve, reject) {
  // 执行异步操作
  if(/* 异步操作成功 */) {
    resolve(value);
  } else {
    reject(error);
  }
}).then(function(value) {
  // 处理异步操作成功的结果
}, function(error) {
  // 处理异步操作失败的结果
});

Promise 的使用方法实例

示例1：使用 Promise 获取和处理 HTTP 请求的数据

下面是一个使用 Promise 获取和处理 HTTP 请求的数据的示例：

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

getJSON('/posts.json').then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

在这个示例中，我们创建了一个名为 getJSON() 的函数，该函数接受一个 URL 作为参数并返回 Promise 对象。该函数会检查通过 API 请求获得的数据中是否包含 JSON 数据。如果是 JSON 数据，则 Promise 对象的状态将变为 resolved 并传递 JSON 数据。如果是其他数据，则 Promise 对象的状态将变为 rejected 并传递错误对象。

示例2：使用 Promise 处理多个异步操作的结果

下面是一个使用 Promise 处理多个异步操作结果的示例：

function doubleNumber(number) {
  return new Promise(function(resolve, reject) {
    if(typeof number !== 'number') {
      reject(new Error('请输入数字！'));
    }
    setTimeout(function() {
      resolve(number * 2);
    }, 1000);
  });
}

function addNumbers(x, y) {
  return Promise.all([doubleNumber(x), doubleNumber(y)]).
    then(function(values) {
      return values[0] + values[1];
    });
}

addNumbers(2, 3).
  then(function(result) {
    console.log(result); // 输出 10
  }, function(error) {
    console.error('出错了', error);
  });

在这个示例中，我们定义了doubleNumber() 和addNumbers() 两个函数。在 addNumbers() 中，我们使用 Promise.all() 方法来等待 doubleNumber() 中的两个 Promise 对象，这两个 Promise 对象分别对 x 和 y 进行加倍。一旦两个 Promise 对象均 resolved，addNumbers() 调用 then() 方法并将两个加倍后的数字相加，最后返回和。

这便是 Promise 的两条使用方法实例，希望可以帮到你！