ES6 中的 Promise 链式调用技巧-JavaScript中文网-JavaScript教程资源分享门户

ES6 中的 Promise 链式调用技巧

在前端开发中，异步操作是非常常见的，比如发送 AJAX 请求，读取文件等等。而 Promise 是一种解决异步编程的方式，它可以让我们更加方便地处理异步操作，避免回调地狱的问题。在 ES6 中，Promise 得到了官方支持，同时也增加了一些新的语法和方法，其中 Promise 链式调用技巧是我们需要掌握的一项技能。

Promise 链式调用

Promise 链式调用是指在 Promise 中使用 then 方法来处理异步操作，并将 then 方法返回的 Promise 对象再次使用 then 方法进行处理，以此类推，直到所有操作完成。这种方式可以让我们更加方便地处理异步操作的结果，避免回调地狱的问题。

示例代码：

// javascriptcn.com 代码示例
function getData(url) {
  return new Promise(function(resolve, reject) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = function() {
      reject('Network Error');
    };
    xhr.send();
  });
}

getData('https://jsonplaceholder.typicode.com/todos/1')
  .then(function(response) {
    const data = JSON.parse(response);
    console.log(data);
    return data.userId;
  })
  .then(function(userId) {
    return getData(`https://jsonplaceholder.typicode.com/users/${userId}`);
  })
  .then(function(response) {
    const data = JSON.parse(response);
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

在上面的示例代码中，我们首先定义了一个名为 getData 的函数，用来发送 AJAX 请求，并返回一个 Promise 对象。然后我们使用 Promise 链式调用的方式，先获取到数据中的 userId，然后使用该 userId 再次发送 AJAX 请求，获取用户信息。最后使用 catch 方法来处理异常情况。

链式调用技巧

除了基本的链式调用外，还有一些技巧可以让我们更加方便地处理异步操作的结果。

返回 Promise 对象

在 then 方法中返回一个 Promise 对象，可以让我们继续使用链式调用的方式，处理下一个异步操作的结果。

示例代码：

// javascriptcn.com 代码示例
getData('https://jsonplaceholder.typicode.com/todos/1')
  .then(function(response) {
    const data = JSON.parse(response);
    console.log(data);
    return getData(`https://jsonplaceholder.typicode.com/users/${data.userId}`);
  })
  .then(function(response) {
    const data = JSON.parse(response);
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

在上面的示例代码中，我们在第一个 then 方法中返回了一个 Promise 对象，这样就可以继续使用链式调用的方式，处理下一个异步操作的结果。

使用 Promise.all 方法

Promise.all 方法可以接受一个 Promise 对象数组作为参数，返回一个新的 Promise 对象。当所有的 Promise 对象都被解决后，返回的 Promise 对象才会被解决，解决的结果是一个数组，数组中包含了所有 Promise 对象的解决结果。

示例代码：

// javascriptcn.com 代码示例
const promise1 = getData('https://jsonplaceholder.typicode.com/todos/1');
const promise2 = getData('https://jsonplaceholder.typicode.com/users/1');

Promise.all([promise1, promise2])
  .then(function(results) {
    const data1 = JSON.parse(results[0]);
    const data2 = JSON.parse(results[1]);
    console.log(data1);
    console.log(data2);
  })
  .catch(function(error) {
    console.error(error);
  });

在上面的示例代码中，我们使用 Promise.all 方法来同时发送两个 AJAX 请求，当两个请求都完成后，使用 then 方法处理结果。

使用 Promise.race 方法

Promise.race 方法可以接受一个 Promise 对象数组作为参数，返回一个新的 Promise 对象。当其中任意一个 Promise 对象被解决后，返回的 Promise 对象就会被解决，解决的结果是第一个被解决的 Promise 对象的解决结果。

示例代码：

// javascriptcn.com 代码示例
const promise1 = getData('https://jsonplaceholder.typicode.com/todos/1');
const promise2 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    reject('Timeout Error');
  }, 5000);
});

Promise.race([promise1, promise2])
  .then(function(result) {
    const data = JSON.parse(result);
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

在上面的示例代码中，我们使用 Promise.race 方法来同时发送两个异步操作，当其中任意一个完成后，使用 then 方法处理结果。如果 5 秒钟内没有任何一个操作完成，就会抛出 Timeout Error 异常。

总结

在 ES6 中，Promise 链式调用是处理异步操作的一种非常方便的方式。除了基本的链式调用外，我们还可以使用返回 Promise 对象、Promise.all 方法和 Promise.race 方法等技巧来更加方便地处理异步操作的结果。掌握 Promise 链式调用技巧，可以让我们更加高效地进行前端开发。

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