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.resolvePromisefulfilled 状态时的简写,相当于 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 方法也是有两个回调函数的:onFulfilledonRejected

Promise.reject

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

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

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

相关文章

  • JavaScript编写开发动态时钟

    JavaScript编写开发动态时钟

    这篇文章主要为大家详细介绍了JavaScript编写开发动态时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • JS简单实现文件上传实例代码(无需插件)

    JS简单实现文件上传实例代码(无需插件)

    注意一下:在chrome浏览器下,为了数据安全,隐藏的input:file不能trigger “click” 事件。 所以要设置input:file的透明度达到隐藏的效果
    2013-11-11
  • 函数式 JavaScript(一)简介

    函数式 JavaScript(一)简介

    JavaScript 是一种强大但被误解的语言。关于它到底是一种面向对象的语言还是函数式语言,人们众说纷纭——但是现在让我们把这些争辩都抛到脑后。
    2014-07-07
  • JavaScript使用Proxy编写一个取值限制器

    JavaScript使用Proxy编写一个取值限制器

    最近一直在开发低代码平台的东西,由于项目里面东西有点多,取值或调用起来比较麻烦,使用本文就将使用Proxy编写一个取值限制器,需要的小伙伴可以参考下
    2023-12-12
  • 很棒的js选项卡切换效果

    很棒的js选项卡切换效果

    很棒的JavaScript选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 微信小程序实现图片翻转效果的实例代码

    微信小程序实现图片翻转效果的实例代码

    这篇文章主要介绍了微信小程序实现图片翻转效果的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法

    JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法

    这篇文章主要介绍了JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法,结合实例形式分析了javascript提示此类异常的常见原因与相关解决方法,需要的朋友可以参考下
    2016-08-08
  • Js获取图片原始宽高的实现代码

    Js获取图片原始宽高的实现代码

    下面小编就为大家带来一篇Js获取图片原始宽高的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2016-05-05
  • JS实现移动端判断上拉和下滑功能

    JS实现移动端判断上拉和下滑功能

    通过手指触屏,利用touchstart和touchend计算前后滑动距离,判断是上拉还是下滑。接下来通过实例代码给大家介绍js移动端判断上拉和下滑功能,感兴趣的朋友一起看看吧
    2017-08-08
  • IE 当eval遇上function的处理

    IE 当eval遇上function的处理

    在IE下,当eval遇上function,IE下会出现怪异情况,我们用例子一步步说明
    2011-08-08

最新评论