脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript Promise链式调用与错误处理

深入理解JavaScript Promise链式调用与错误处理机制

 更新时间：2024年09月08日 08:59:28   作者：snakeshe1010  
在JavaScript的异步编程中,Promise是一个非常重要的概念,它允许我们以链式的方式处理异步操作,使得代码更加清晰和易于管理,本文将通过一系列代码示例,深入探讨Promise的链式调用和错误处理机制,需要的朋友可以参考下

Promise链式调用基础

Promise的链式调用是通过.then()方法实现的，该方法会返回一个新的Promise对象。这意味着我们可以在一个Promise完成后，继续进行下一个异步操作，形成一条Promise链。

const pro1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

const pro2 = pro1.then((data) => {
  console.log(data);
  return data + 1;
});

const pro3 = pro2.then((data) => {
  console.log(data);
});

在上面的例子中，pro1在1秒后解析为1，pro2接着处理pro1的结果，并返回2。pro3则是处理pro2的结果。

错误处理

.catch()方法是Promise链式调用中处理错误的常用方式。它等同于在.then()方法中只传递第二个参数。

new Promise((resolve, reject) => {
  reject(new Error('abc'));
}).catch((err) => {
  console.log('失败了！！', err);
});

链式调用的深入理解

Promise链中的状态传递是异步编程中的一个关键概念。一个Promise的状态（pending、fulfilled、rejected）会影响链中下一个Promise的状态。

const pro1 = new Promise((resolve, reject) => {
  console.log('学习');
  reject(123);
});

const pro2 = pro1.then(() => {
  console.log('考试');
}, (err) => {
  console.log('处理失败', err);
});

console.log(pro2); // Promise {<rejected>: 123}

在这个例子中，pro1被拒绝，因此pro2也会被拒绝，并且会打印出错误信息。

详细规则说明

  • 新任务的状态取决于后续处理：
    • 若没有相关的后续处理，新任务的状态和前任务一致，数据为前任务的数据
const pro1 = new Promise((resolve, reject) => {
  console.log('学习');
  console.log('中了五个亿彩票');
  reject(123)
});

const pro2 = pro1.then(( ) => {
  console.log('考试') 
  // 后续任务只处理了成功，没处理失败，会导致pro2也会失败
  // 此时pro1的状态是reject，原因是123
  // pro2的状态也是rejected，原因是123
});

setTimeout(() => {
  console.log(pro2) // Promise {<rejected>: 123}
},1000)
  • 若有后续处理但还未执行，新任务挂起。
const pro1 = new Promise((resolve, reject) => {
  setTimeout(()=>{
    resolve()
  }, 2000)
});

const pro2 = pro1.then(( ) => {
  console.log('考试') 
});

setTimeout(() => {
  console.log(pro2) // Promise {<pending>}，此时任务一学习需要2秒，1秒之后，任务一还没完，那么任务二也是挂起
},1000)
  • 若后续处理执行了，则根据后续处理的情况确定新任务的状态
    • 后续处理执行无错，新任务的状态为完成，数据为后续处理的返回值
const pro1 = new Promise((resolve, reject) => {
  console.log('学习')
  resolve()
});

const pro2 = pro1.then(( ) => {
  console.log('考试' ) 
  return 100
});

setTimeout(() => {
  console.log(pro2) // Promise {<fulfilled>: 100}
},1000)
  • 后续处理执行有错，新任务的状态为失败，数据为异常对象，也就是说看后续任务处理过程中是否报错，前面的任务成功，看后续任务的成功处理是否报错，前面任务失败看后续任务的处理失败过程是否报错
const pro1 = new Promise((resolve, reject) => {
  console.log('学习')
  resolve()  
});

const pro2 = pro1.then(( ) => {
  console.log('考试' ) 
  throw new Error('睡着了!!')
  return 100
});

setTimeout(() => {
  console.log(pro2) // Promise {<rejected>: Error: 睡着了!!at <anonymous>:8:9}
},1000)
  • 后续执行后返回的是一个任务对象，新任务的状态和数据与该任务对象一致
const pro1 = new Promise((resolve, reject) => {
  console.log('学习')
  resolve()
});

const pro2 = pro1.then(( ) => {
  return new Promise((resolve, reject) => {
  })
});

setTimeout(() => {
  console.log(pro2) // Promise {<pending>} pro2的后续处理，返回的是新promise，就要看新的promise状态
},1000)

实战演练

修改上一节课中发送短信的示例，我们可以更好地理解Promise链式调用的实际应用。

function sendMessage(name) {
  return new Promise((resolve, reject) => {
    // 模拟发送表白短信
    setTimeout(() => {
      if (Math.random() <= 0.1) {
        resolve(`${name} -> 帅哥程序员：我是九，你是三，除了你还是你😘`);
      } else {
        reject(`${name} -> 帅哥程序员：你是个好人😜`);
      }
    }, 1000);
  });
}

sendMessage('kitty')
  .catch((reply) => sendMessage('cathy'))
  .catch((reply) => sendMessage('Linda'))
  .then((reply) => {
    console.log(reply);
    console.log('帅哥程序员终于找到了自己的伴侣');
  })
  .catch((reply) => {
    console.log(reply);
    console.log('帅哥程序员命犯天煞孤星，无伴终老，孤独一生');
  });

练习题

  • 下面代码的输出结果是什么
const pro1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

const pro2 = pro1.then((data) => {
  console.log(data);
  return data + 1;
});

const pro3 = pro2.then((data) => {
  console.log(data);
});

// console.log(pro1, pro2, pro3);
// promise<pending>, promise<pending>, promise<pending>，前一个任务是pending后续任务肯定也是Pending

setTimeout(() => {
  console.log(pro1, pro2, pro3);
}, 2000);
// 1
// 2
// Promise {<fulfilled>: 1} Promise {<fulfilled>: 2} Promise {<fulfilled>: undefined}
  • 下面代码的输出结果是什么
new Promise((resolve, reject) => {
  resolve(1);
})
  .then((res) => {
    console.log(res);
    return 2;
  })
  .catch((err) => {
    return 3;
  })
  .then((res) => {
    console.log(res);
  });

// 1 2
  • 下面代码的输出结果是什么
new Promise((resolve, reject) => {
  resolve();
})
  .then((res) => {
    console.log(res.toString()); // 报错
    return 2;
  })
  .catch((err) => {
    return 3;
  })
  .then((res) => {
    console.log(res);
  });

// 3
  • 下面代码的输出结果是什么
new Promise((resolve, reject) => {
  throw new Error(1);
})
  .then((res) => {
    console.log(res);
    return new Error('2');
  })
  .catch((err) => {
    throw err;
    return 3;
  })
  .then((res) => {
    console.log(res);
  });

// pro1 reject Error(1)
// pro2 reject Error(1)
// pro3 reject Error(1)
// pro4 reject Error(1)
// 什么都不打印
  • 下面的代码输出什么
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject();
  }, 1000);
});

const promise2 = promise1.catch(() => {
  return 2;
});

console.log('promise1', promise1);
console.log('promise2', promise2);

// Promise1 {<pending>}
// promise2 Promise {<pending>}

setTimeout(() => {
  console.log('promise1', promise1);
  console.log('promise2', promise2);
}, 2000);
// promise1 Promise {<rejected>: undefined}
// promise2 Promise {<fulfilled>: 2}

以上就是深入理解JavaScript Promise链式调用与错误处理机制的详细内容，更多关于JavaScript Promise链式调用与错误处理的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • JavaScript中的变量提升和函数提升

    JavaScript中的变量提升和函数提升

    这篇文章主要介绍了JavaScript中的变量提升和函数提升，在js中对变量进行操作后打印值经常会出现undefined的现象。其实原因是因为js中有一个叫做变量提升的功能
    2022-07-07
  • JS函数的几种定义方式分析

    JS函数的几种定义方式分析

    这篇文章主要介绍了JS函数的几种定义方式,实例分析了JavaScript四种函数定义方式及具体的使用技巧,需要的朋友可以参考下
    2015-12-12
  • 详解ES6之async+await 同步/异步方案

    详解ES6之async+await 同步/异步方案

    这篇文章主要介绍了详解ES6之async+await 同步/异步方案，本文以最简明的方式来疏通 async + await，有兴趣的可以了解下
    2017-09-09
  • JavaScript适配器模式详解

    JavaScript适配器模式详解

    这篇文章主要为大家详细介绍了JavaScript适配器模式的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 详解webpack 热更新优化

    详解webpack 热更新优化

    这篇文章主要介绍了详解webpack 热更新优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 微信小程序开发实现首页弹框活动引导功能

    微信小程序开发实现首页弹框活动引导功能

    自己x实现的一个比较简单微信弹窗功能,主要就是教会大家对微信弹窗的用法和理解,这篇文章主要给大家介绍了关于微信小程序如何实现首页弹框活动引导功能的相关资料,需要的朋友可以参考下
    2021-08-08
  • Javascript实现视频轮播在pc端与移动端均可

    Javascript实现视频轮播在pc端与移动端均可

    用Javascript实现视频轮播，毕竟是客户的需求吗？所以尽量实现下,下面有个实现视频轮播的示例，pc端与移动端均可以实现，感兴趣的朋友可以了解下
    2013-09-09
  • javascript表单正则应用

    javascript表单正则应用

    这篇文章主要为大家详细介绍了javascript表单正则应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Javascript复制实例详解

    Javascript复制实例详解

    最近接了个项目，其中有项目需求是这样的，需要复制内容到剪切板，因为有众多浏览器，所以兼容性很重要，下面通过本文给大家介绍Javascript复制实例详解，对js复制相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • 一文详解Web Audi 绘制音频图谱

    一文详解Web Audi 绘制音频图谱

    这篇文章主要为大家介绍了Web Audi 绘制音频图谱实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03

最新评论