关键词

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 对象分别对 xy 进行加倍。一旦两个 Promise 对象均 resolved,addNumbers() 调用 then() 方法并将两个加倍后的数字相加,最后返回和。

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

本文链接:http://task.lmcjl.com/news/11614.html

展开阅读全文