Promise链式调用与错误处理

简介: Promise链式调用是处理异步操作的方式,它按顺序执行多个任务,每个任务返回Promise对象。通过`.then()`指定成功后的操作,`.catch()`处理错误。示例代码展示了如何使用fetch获取数据,根据状态码解析响应并处理数据,错误则通过`.catch()`捕获。另一个例子定义了三个异步函数构成Promise链,依次执行并处理结果,错误同样由`.catch()`统一管理。

 Promise链式调用是一种处理异步操作的方法,它可以依次执行多个异步任务,并且可以在每个任务完成后进行后续操作。

在Promise链式调用中,每个任务都返回一个Promise对象,可以通过调用.then()方法来指定任务完成后的操作,同时也可以通过.catch()方法来处理错误。

下面是一个示例代码:

fetch('https://api.example.com/data')
  .then(response => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('Request failed');
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

image.gif

在上面的示例中,首先使用fetch()函数发送一个异步请求,返回一个Promise对象。然后通过.then()方法来处理请求的返回结果,如果状态码是200,则通过response.json()方法解析响应数据并返回一个新的Promise对象;如果状态码不是200,则抛出一个错误。

接下来,通过.then()方法处理解析后的数据,并将数据输出到控制台。如果在整个过程中发生了错误,可以通过.catch()方法来捕获并处理错误。

通过Promise链式调用,可以很方便地处理多个异步任务,并且可以在每个任务的结果返回后进行后续操作。同时,通过.catch()方法可以统一处理错误,使代码更加清晰和可读。

以下是一个简单的Promise链式调用的示例:

function getFirstData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('First data');
    }, 1000);
  });
}
function processFirstData(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (data === 'First data') {
        resolve('Processed first data');
      } else {
        reject('Error processing first data');
      }
    }, 1000);
  });
}
function processSecondData(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Processed second data: ${data}`);
    }, 1000);
  });
}
getFirstData()
  .then(processFirstData)
  .then(processSecondData)
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error);
  });

image.gif

在这个示例中,我们定义了三个异步函数 getFirstDataprocessFirstDataprocessSecondData。每个函数都返回一个Promise对象。

首先,我们调用 getFirstData 函数,它会在1秒后返回一个值为 'First data' 的Promise对象。

然后,我们使用.then()方法将 processFirstData 函数添加到Promise链上,它会在1秒后处理第一个数据,并根据条件返回一个新的Promise对象。

接下来,我们使用.then()方法将 processSecondData 函数添加到Promise链上,它会在1秒后处理第二个数据,并返回一个新的Promise对象。

最后,我们使用.then()方法处理最终的结果,并将结果输出到控制台。如果在整个过程中发生了错误,通过.catch()方法可以捕获并处理错误。

这样,我们就实现了一个简单的Promise链式调用,通过依次处理多个异步任务,并在每个任务完成后进行后续操作。

相关文章
|
1月前
|
前端开发 JavaScript
Promise的链式调用案例讲解
Promise的链式调用案例讲解
|
1月前
|
前端开发
Promise的链式调用
Promise的链式调用是指在一个Promise对象上连续调用多个then方法的过程。通过链式调用,可以将多个异步操作按照顺序执行,并且可以在每个操作完成后处理返回的结果。
37 0
|
10月前
|
前端开发 程序员
promise的链式调用和promise的嵌套的实现
promise的链式调用和promise的嵌套的实现
148 0
|
前端开发
手写Promise最简20行版本,实现异步链式调用。(重构版)
在面试的时候,经常会有面试官让你实现一个 Promise,如果参照 A+规范来实现的话,可能面到天黑都结束不了。
|
前端开发
重新手写promise,理解核心的异步链式调用原理
重新手写promise,理解核心的异步链式调用原理
150 0
|
前端开发 开发者
图解 Promise 实现原理(二)—— Promise 链式调用
本系列文章由浅入深逐步实现 Promise,并结合流程图、实例以及动画进行演示,达到深刻理解 Promise 用法的目的。
944 0
|
前端开发
Promise的异常穿透和中断Promise的链式请求
Promise的异常穿透和中断Promise的链式请求
|
前端开发 JavaScript
面试题:promise的链式怎么实现的
promise的链式怎么实现的
133 0
|
前端开发
Promise链式调用与升级版
promise链式调用,动态链式调用代码实现。
|
前端开发
Promise源码解密-then的链式调用
Promise源码解密-then的链式调用