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

目录
  • then
  • catch
  • finally
  • Promise.resolve
  • Promise.reject

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抛出错误解决的资料请关注我们其它相关文章!

(0)

相关推荐

  • Promise 链式调用原理精简示例

    目录 前言 代码 经典案例 解析 第一步 第二步 分析说明,此过程需结合上文中的案例一起阅读 总结 前言 在面试的过程中,总有一些面试官会问你,手写一个简易版的Promise得行不,得行的话就写一个出来看看,啪一哈,就把纸和笔给了你. 我们思索半天就写出来了个下面这个. 哦豁,高薪张开了它的翅膀,远离了我们. class Promise { constructor (resolve, reject) {} resolve () {} reject (){} then () {} catch ()

  • Promise对象all与race方法手写示例

    目录 前言 Promise.all 介绍 手写 Promise.race 介绍 手写 前言 在理解了手写promsie.then的方法后,再来看它的其他方法,感觉真的简单了不少. Promise.all 介绍 Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例. const p = Promise.all([p1, p2, p3]); 上面代码中,Promise.all()方法接受一个数组作为参数,p1.p2.p3都是 Promise 实例.另外

  • 一文详解Promise.race()方法功能及应用场景

    目录 正文 什么是 Promise.race() 方法 Promise.race() 方法的应用场景 Promise.race() 方法的错误处理 Promise.race() 添加超时功能 Promise.race() 取消异步操作 结论 正文 当我们需要同时发起多个异步请求并在其中任意一个请求完成后得到响应时,可以使用 Promise.race() 方法.本文将对 Promise.race() 方法进行深入理解和实践. 什么是 Promise.race() 方法 Promise.race()

  • 深入理解JS中的Promise.race控制并发量

    目录 开篇 一.Promise.race 二.并发效果展示 三.代码 总结与思考 开篇 比如在开发中会进行一系列的网络请求,但是有些情况需要控制一下网络请求请并发量.这里简单的用 Promise.race 及 await 的特性来理解一下,如何对任务的并发量进行控制. 一.Promise.race Promise.race 作用就是将多个异步任务包裹起来,当有一个完成的话,那么就会触发 then 事件.除了这个不错的特性方法外,await 这个关键字也比较有用,可以这样理解,await 后面的代

  • Golang中的错误处理的示例详解

    目录 1.panic 2.包装错误 3.错误类型判断 4.错误值判断 1.panic 当我们执行panic的时候会结束下面的流程: package main import "fmt" func main() { fmt.Println("hello") panic("stop") fmt.Println("world") } 输出: go run 9.go hellopanic: stop 但是panic也是可以捕获的,我们可

  • Go语言字符串基础示例详解

    目录 包含 Contains(s,substr string) bool ContainsAny(s, chars string) bool 统计 Count(s, substr string) int 比较 EqualFold(s, t string) bool HasPrefix(s, prefix string) bool HasSuffix(s, suffix string) bool 分割 Fields(s string) []string 下标 Index(s, sep string

  • java教程之对象序列化使用基础示例详解

    这个过程也可以通过网络实现,可以先在Windows机器上创建一个对象,对其序列化,然后通过网络发给一台Unix机器,然后在那里准确无误地重新"装配".像RMI.Socket.JMS.EJB它们中的一种,彼此为什么能够传递Java对象,当然都是对象序列化机制的功劳. Java对象序列化机制一般来讲有两种用途: Java的JavaBeans: Bean的状态信息通常是在设计时配置的,Bean的状态信息必须被存起来,以便当程序运行时能恢复这些状态信息,这需要将对象的状态保存到文件中,而后能够

  • JS中异常抛出和处理方法图文详解

    目录 抛出异常 抛出的表达式类型 基本数据类型 对象 类的实例对象 Error 类的实例对象 Error 的子类 处理异常 js中常见的系统异常: 总结 抛出异常 在 js 中,有时候我们需要处理一些异常或错误.比如编写的某个函数所接收的参数要求是 Number 类型的,如果在该函数被调用时传入的是字符串,就需要发出提醒.此时我们可以使用 throw 语句来抛出个异常: // 例 1 function fn(num) { if (typeof num !== 'number') throw '需

  • await Streaking解决原理示例详解

    目录 前言 优化async/await demo.json 关于Promise 关于async/await 总结 前言 我们现在在请求接口的过程中,已经习惯了async/await的写法,已经逐渐的代替了promise的写法,但我们在开发的过程中,都是混用的状态,当你体验async/await过的好,就会爱不释手. async/await我们要拒绝 Streaking,啥叫 Streaking,我们看个代码. const foo = async () => { const response =

  • django主动抛出403异常的方法详解

    前言 网上的做法基本都是下面的代码 return HttpResponseForbidden() 试了一下,效果一般,没有异常页面显示,最终显示的是浏览器的异常页面,如下图: 设置方法如下: 如果要想让服务器截获异常并且显示错误页可以用下面的方式: id = request.GET.get('id', '') timestamp = request.GET.get('timestamp', '') accesskey = request.GET.get('accesskey', '') if t

  • 详解Vue中使用v-for语句抛出错误的解决方案

    Vue 中使用v-for语句抛出错误的解决方案 今天在维护以前的项目的时候遇见了下面的报错情况,开始我以为是因为jQuery和Vue冲突了,所以把以前的jQuery改了,但是还是出现同样的错误-通过查阅资料,发现是因为循环的变量里面的值重复了,导致Vue报错. 复制代码 代码如下: Uncaught (in promise) TypeError: Cannot read property 'removeChild' of null 接下来查了一下解决方案,发现在Vue 2.0之前的版本可以通过在

  • Promise静态四兄弟实现示例详解

    目录 前言 Promise.all 基础学习 Iterator 接口参数 思路分析 源码实现 Promise.allSettled 基础学习 思路分析 源码实现 Promise.race 基础学习 思路分析 源码实现 Promise.any 基础学习 思路分析 源码实现 前言 恰逢 Promise 也有四个很像的静态三兄弟(Promise.all.Promise.allSettled.Promise.race.Promise.any),它们接受的参数类型相同,但各自逻辑处理不同,它们具体会有什么

  • React之错误边界 Error Boundaries示例详解

    目录 引言 注意 实现 错误边界应该放置在哪? 未捕获错误(Uncaught Errors)该如何处理? 注意:自 React 15 的命名更改 引言 过去,组件内的代码异常会导致 React 的内部状态被破坏,产生可能无法追踪的错误.但 React 并没有提供一种优雅处理这些错误的方式,也无法从错误中恢复. 默认情况下,若一个组件在渲染期间(render)发生错误,会导致整个组件树全部被卸载,这当然不是我们期望的结果. 部分组件的错误不应该导致整个应用崩溃.为了解决这个问题,React 16

  • Go语言基础单元测试与性能测试示例详解

    目录 概述 单元测试 代码说明如下 问题 注意 性能测试 基本使用 自定义测试时间 概述 测试不是Go语言独有的,其实在很多语言都有测试,例如:Go.Java.Python- 要想成为一名合格的大牛,这是程序员必须具备的一项技能,特别是一些大公司,这是加分的一项,主要有如下优点: 代码可以随时测试,保证代码不会产生错误 写出更加高效的代码 testing文档 Testing_flags文档 单元测试 格式:func TestXXX(t *testing.T) //add.go package c

随机推荐