脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Promise抛出错误解决

Promise抛出错误解决基础示例详解

 更新时间：2022年12月15日 09:25:33   作者：uccs  
这篇文章主要为大家介绍了Promise抛出错误解决基础示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

then

then 函数的会接收两个回调函数，一个是 onFulfilled 函数，一个是 onRejected 函数

如果这两个回调函数没有写返回值，默认会 return undefined;

进入下一个函数的 onFulfilled 函数中

const p = new Promise((resolve, reject) => {
  resolve(22);
});
p.then(
  (success1) => {
    console.log("success1", success1); // "success2" 22
    // 没写 return 默认返回 return undefined
  },
  (err1) => {
    console.log("err1", err1);
  }
).then(
  (success2) => {
    console.log("success2", success2); // "success2" undefined
  },
  (err2) => {
    console.log("err2", err2);
  }
);

在这两个回调中 return xxx ，相当于调用 return new Promise((resolve) => resolve(xxx));

const p = new Promise((resolve, reject) => {
  resolve(22);
});
p.then(
  (success1) => {
    return new Promise((resolve, reject) => resolve("success"));
    // 等价于
    return "success";
  },
  (err1) => {
    console.log("err1", err1);
  }
).then(
  (success2) => {
    console.log("success2", success2); // "success2" "success"
  },
  (err2) => {
    console.log("err2", err2);
  }
);

在 onFulfilled 函数和 onRejected 函数中默认返回的都是成功，如果需要返回失败需要显示调用 reject 或者用 throw 抛出错误可以

const p = new Promise((resolve, reject) => {
  resolve(22);
});
p.then(
  (success1) => {
    return new Promise((resolve, reject) => reject("error"));
    // 等价于
    // throw "error";
  },
  (err1) => {
    console.log("err1", err1);
  }
).then(
  (success2) => {
    console.log("success2", success2);
  },
  (err2) => {
    console.log("err2", err2); // "err2" error
  }
);

总结：在 then 回调中 return xxx 会被自动包装成 return new Promise((resolve) => resolve(xxx));，

catch

catch 是用来处理 rejected 状态，是 then 函数的一种特例，相当于 then(null, (err) => {});

catch 为什么能捕获前面的错误？

在 onRejected 函数中，如果没有显示抛出错误，默认会 return undefined; 进入一下个 onFulfilled 函数

finally

finally 不管当前 promise 是什么状态都会执行，也是 then 函数的一种特例，相当于 `then(result => result, err => new Promsie((_, reject) => reject(err)));

Promise.resolve

Promise.resolve 是 Promise 在 fulfilled 状态时的简写，相当于 new Promise(resolve => resolve(xxx))

onFulfilled 函数接收参数

当参数是普通参数时，会直接传递给后面 then 函数

new Promise((resolve) => resolve({ name: "uccs" })).then((data) => {
  console.log(data);
});

当参数是 Promise 对象时，后面的 then 会根据传递的 Promise 对象的状态变化执行哪一个回调

const p = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "我执行了");
});
new Promise((resolve) => resolve(p)).then((data) => {
  console.log(data);
});

具有 then 方法的对象

const thenable = {
  then(resolve, reject) {
    console.log("thenable");
  },
};
new Promise((resolve) => resolve(thenable)).then((data) => {
  console.log(data);
});
  • 用这种这种方式，如果需要改变 Promise 状态是，不能使用 return 形式，这个 then 方法也是有两个回调函数的：onFulfilled 和 onRejected

Promise.reject

Promise.reject 是 Promise 在 rejected 状态是的简写，相当于 new Promise((_, reject) => reject(xxx))

onRejected 函数不管接收什么参数，都会原封不动的向后传递，作为后续方法的参数

以上就是Promise抛出错误解决基础示例详解的详细内容，更多关于Promise抛出错误解决的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 详解JS如何使用Promise缓存网络请求

    详解JS如何使用Promise缓存网络请求

    网络请求是现代Web应用中的常见操作,很多时候需要获取服务器上的数据,在进行网络请求时,为了减轻服务器的压力,缓存策略常被用来避免对同一数据的重复请求,本文将探讨如何使用Promise结合缓存来高效处理网络请求,需要的朋友可以参考下
    2023-12-12
  • 详解微信小程序工程化探索之webpack实战

    详解微信小程序工程化探索之webpack实战

    这篇文章主要介绍了详解微信小程序工程化探索之webpack实战，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 微信小程序wx.request拦截器使用详解

    微信小程序wx.request拦截器使用详解

    这篇文章主要介绍了微信小程序wx.request拦截器详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 详解layui laydate选择时间的回调方法

    详解layui laydate选择时间的回调方法

    这篇文章主要介绍了layui laydate选择时间的回调方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    下面小编就为大家带来一篇js对象实例详解(JavaScript对象深度剖析,深度理解js对象)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JavaScript日期时间与时间戳的转换函数分享

    JavaScript日期时间与时间戳的转换函数分享

    这篇文章主要介绍了JavaScript日期时间与时间戳的转换函数分享,本文给出两个函数实现日期时间和时间戳间的转换,需要的朋友可以参考下
    2015-01-01
  • js控制的遮罩层实例介绍

    js控制的遮罩层实例介绍

    把项目里很土的弹窗，改成了遮罩层显示，现在感觉好多了。在这里创建一个div和body一样大小，这样就可以把整个页面全部盖住了，具体实现祥看本文，希望可以帮助到你
    2013-05-05
  • BootstrapValidator超详细教程(推荐)

    BootstrapValidator超详细教程(推荐)

    这篇文章主要介绍了BootstrapValidator超详细教程(推荐)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-12-12
  • js 字符串转化成数字的代码

    js 字符串转化成数字的代码

    js 字符串转化成数字的代码，需要的朋友可以参考下。
    2011-06-06
  • js通过地址栏给action传值(中文乱码全是问号)

    js通过地址栏给action传值(中文乱码全是问号)

    我从js代码中通过地址栏传值给了action的相应变量，但是，如果变量值为中文的时候，在action中测试输出则为问号
    2013-05-05

最新评论