Promise 函数中封装的异步操作的错误处理技巧

前端开发中，异步操作是非常常见的，例如：AJAX 请求、定时器、Promise 等等。当异步操作遇到异常时，我们应该如何进行处理呢？在 Promise 函数中能不能对异步操作的错误进行封装处理呢？

Promise 错误处理的基本方法

我们可以通过在捕获到 catch 错误之后进行处理，例如：

apiRequest()
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

但当异步操作嵌套深的时候，这样显然不是一个好的方法，代码可读性也很差。

封装 Promise 的错误处理方法

我们可以通过一个封装的方法来对 Promise 的错误进行处理，例如：

function apiRequest() {
  return new Promise((resolve, reject) => {
    fetch('https://example.com/api')
      .then(response => {
        if (response.status === 200) {
          response.json()
            .then(responseJSON => {
              // 业务成功处理
              resolve(responseJSON);
            })
            .catch(error => {
              // Json 处理异常
              reject(error);
            })
        } else {
          // 其他错误
          reject({});
        }
      })
      .catch(error => {
        // 请求异常处理
        reject(error);
      });
  });
}

在一个 Promise 函数中，我们可以使用 new Promise() 来包裹异步操作，这样可以更加灵活地处理 Promise 的异步错误，并在 Promise 返回结果时进行异常处理。

Promise 进行错误信息传递

在异步操作过程中，如果需要在多个地方进行错误捕获，可以通过 Promise 进行错误信息传递，例如：

function apiRequest1(params) {
  return new Promise((resolve, reject) => {
    fetch('https://example.com/api/1')
      .then(response => {
        if (response.status === 200) {
          response.json()
            .then(responseJSON => {
              // 业务成功处理
              resolve(responseJSON);
            })
            .catch(error => {
              // Json 处理异常
              reject(error);
            })
        } else {
          // 其他错误
          reject({});
        }
      })
      .catch(error => {
        // 请求异常处理
        reject(error);
      });
  });
}

function apiRequest2(params) {
  return new Promise((resolve, reject) => {
    apiRequest1(params)
      .then((response1) => {
        // 处理 apiRequest1 的返回结果
        console.log(response1);
        resolve();
      })
      .catch((error) => {
        // 处理 apiRequest1 异常信息
        console.error(error);
        // 重新抛出异常信息
        reject(error);
      });
  });
}

在 apiRequest2 中，我们对 apiRequest1 的处理结果进行了错误处理，并将异常信息重新抛出，在 then 的 catch 中进行处理。这样就可以实现错误信息的传递。

总结

通过以上的方法，我们可以更加灵活地处理 Promise 函数中的错误信息，并进行异常信息的传递，提高代码的可读性和可维护性。在编写异步操作的代码时，需要认真思考错误处理方式，并进行规范的编码。

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