首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

奇怪的Promise链接情况: then()参数未定义,未返回最后一个链数据[重复]

问题分析

你遇到的问题可能是由于Promise链中的某个环节没有正确返回值,导致后续的.then()方法无法获取到预期的数据。这种情况通常发生在以下几种情况:

  1. 未返回值:在.then()回调函数中没有返回值。
  2. 返回了undefined:在.then()回调函数中返回了undefined
  3. 抛出异常:在.then()回调函数中抛出了异常,但没有被捕获。
  4. 异步操作未完成:在.then()回调函数中进行了异步操作,但没有正确处理。

解决方法

1. 确保每个.then()回调函数都返回值

代码语言:txt
复制
new Promise((resolve, reject) => {
  resolve('initial data');
})
.then(data => {
  console.log(data); // 'initial data'
  return 'first then';
})
.then(data => {
  console.log(data); // 'first then'
  return 'second then';
})
.then(data => {
  console.log(data); // 'second then'
});

2. 处理异常

代码语言:txt
复制
new Promise((resolve, reject) => {
  resolve('initial data');
})
.then(data => {
  console.log(data); // 'initial data'
  if (data === 'initial data') {
    throw new Error('Data is initial data');
  }
  return 'first then';
})
.catch(error => {
  console.error(error); // Error: Data is initial data
})
.then(data => {
  console.log(data); // undefined
  return 'second then';
})
.then(data => {
  console.log(data); // 'second then'
});

3. 处理异步操作

代码语言:txt
复制
new Promise((resolve, reject) => {
  resolve('initial data');
})
.then(data => {
  console.log(data); // 'initial data'
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('first then');
    }, 1000);
  });
})
.then(data => {
  console.log(data); // 'first then'
  return 'second then';
})
.then(data => {
  console.log(data); // 'second then'
});

参考链接

通过以上方法,你可以确保Promise链中的每个.then()回调函数都能正确返回值,从而避免出现未定义或未返回最后一个链数据的问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【译】Typescript 3.9 常用新特性一览

,但是也制造出了一个问题。...预计在 **`3.9`** 发布,结果微软又跳票了,可以等下一个版本了。...现在有了如下自动引入功能 const { readFile } = require('fs') 5.2 缺失函数返回自动修复功能 在某些情况下,我们可能会忘记返回函数中最后一条语句值,尤其是在向箭头函数添加大括号时...6.1 解析可选与非 null 断言中差异 TypeScript 最近实现了对可选操作符支持,但根据广大使用者反馈,非 null 断言操作符(!)可选(?.)行为不符合直觉。...bar).baz 在以上代码中,括号会阻止可选“短路”行为;因此如果未定义 foo 为 undefined,则访问 baz 会引发运行时错误。

1.3K20

一道不一样前端架构师最终面试题 【实用系列】

---- 这是一个关于前端错误处理题目,由浅入深 本题答案: xxxx未定义,致命错误,之前无错误捕获处理机制,页面没有跳转到百度 ---- 第二个版本: 这里还是比较简单,因为try里面才会捕获错误...但这里需要注意,由于上面提到了addEventListener也能够捕获js错误,因此需要过滤避免重复捕获,判断为资源错误时候才进行处理。...---- 当我们打开return true 时候 全局错误捕获,并且控制台不会出现捕获错误了~ ---- 细心朋友会发现,控制台一直有一个报错,没错,这是一个静态资源请求,img标签。...-- Promise捕获,对于频繁调用函数,肯定是需要封装成promise风格,统一处理错误,统一接口捕获一次就可以了,因为onerror函数并不能捕获promise错误,这里我就不演示了 >...由于现在错误监控、上报已经形成了一套完整商业,这方面并不是我强项,如果写得不对地方,欢迎指出,架构师岗位面试,更考察你对项目整体把控能力,最后出现这个题目,我觉得也正常 ---- 本开源项目gitHub

2.7K10
  • 10个实用Javascript技巧

    第二个参数是替换器,它可以是控制字符串化过程函数,也可以是数组,在这种情况下,它指示应包含在字符串化输出中属性名称。 4....现在,使用可选运算符完成相同验证更容易(更干净!)。更好是,你甚至可以使用括号表示法将可选链接与表达式一起使用,或者,如果你有一个深度嵌套对象,你可以堆叠可选链接运算符来检查更深层次属性。...由于每个任务都是异步运行,因此它们可以并行处理,并且一旦所有promise都得到解决,就可以使用返回数据。...请记住,如果单个promise被拒绝,Promise.all也会立即返回一个被拒绝promise。 如果你正在开发微服务架构并且需要尽快从多个端点获取重要非顺序数据,则可以使用此技巧。...一旦所有promise都解决了,Promise.all将返回一个promise,该promise解决了最初提供promise结果数组。

    1.5K20

    我不知道前端(一)

    ---- JavaScript数据类型 值类型(基本数据类型) :字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol...---- Promisedone与扩展always(或者说finally) done Promise 对象回调,不管以then方法或catch方法结尾,要是最后一个方法抛出错误,都有可能无法捕捉到...因此,我们可以提供一个done方法,总是处于回调尾端,保证抛出任何可能出现错误。...对象最后状态如何,都会执行操作 ---- Promisethen 我想你对于 promise .then(()=>{ console.log('success'); }) 蛮熟悉 谁知道这玩意儿居然有第二个参数...promise.then(()=>{},()=>{ console.log('fail'); }) ---- 关于this 工作原理,4种情况 1、当在函数调用时候指向widow 2、当方法调用时候指向调用对象

    56010

    这些 JavaScript 细节,你知道不?

    Promise Promise 信任问题 回调调用 提供一个超时处理解决方案: // 用于超时一个Promise工具 function timeoutPromise(delay) { return...由于一个 Promise 仅仅是连接到一起成员 Promise,没有把整个标识为一个个体实体,这意味着没有外部方法可以用于观察可能发生错误。...在这个特定例子中,只要有一个指向最后一个 promise 引用就足够了(下面代码中 p),因为你可以在那里注册拒绝处理函数,而且这个处理函数能够得到所有传播过来错误通知: // foo(....,但是这里 p 并不指向一个 promise(调用 foo(42) 产生一个),而是指向最后一个 promise,即来自调用 then(STEP3) 一个。...但是,还有很多异步情况适合另一种模式——一种类似于事件或数据模式。在表面上,目前还不清楚 Promise 能不能很好用于这样用例,如果不是完全不可用的话。

    45430

    javascript ES2020 已经来了

    下面是使用可选一个例子。...使用动态导入,代码会根据需要通过较小捆绑包来传递(而不是像以前那样需要下载一个大捆绑包)。 当使用动态导入时,导入关键字可以作为一个函数调用,它返回一个Promise。...Promise.allSettled() 该方法返回一个promise,该Promise在所有给定promise被满足或拒绝后解析。它通常用于异步任务不依赖彼此成功完成情况,如下例所示。...'John' 当左边操作数未定义或为空时,该操作符将返回右手操作数。在上面的例子中,由于student.name未定义,该操作符将把name值设置为'John'。...我希望你觉得这篇文章对你有所帮助,并且你和我一样对使用这些功能到来感到非常兴奋! 原文链接

    1.3K40

    精读《捕获所有异步 error》

    成熟产品都有较高稳定性要求,仅前端就要做大量监控、错误上报,后端更是如此,一个考虑异常可能导致数据错误、服务雪崩、内存溢出等等问题,轻则每天焦头烂额处理异常,重则引发线上故障。...要捕获 async 函数内异常,可以调用 .catch,因为 async 函数返回一个 Promise: ;(async () => { throw new Error('err') })().catch...这个行为很奇怪,当程序复杂时很难排查,因为并行 Promise 建议用 Promise.all 处理: await Promise.all([ wait(1000).then(() => {...throw new Error('err') }), // p1 wait(2000), ]) 另外 Promise 错误会随着 Promise 传递,因此建议把 Promise 内多次异步行为改写为多条模式...总结 关于异步错误处理,如果还有其它考虑到情况,欢迎留言补充。

    79820

    JavaScript 常见面试题速查

    apply,接收两个参数一个是 this 绑定对象,一个参数数组 call,第一个参数是 this 绑定对象,后面的其余参数是传入函数执行参数 bind,传入一个对象,返回一个 this 绑定了传入对象新函数...Promise一个构造函数,接收一个函数作为参数返回一个 Promise 实例。一个 Promise 实例有三种状态:pending、resolved、rejected。...,将数据往下传递,会导致多个异步函数嵌套情况,代码不够直观 如果前后两个异步任务不需要传递参数情况下,那后一个异步任务也需要前一个成功后再执行下一步操作,这种情况下,也需要嵌套,代码不够直观 Promise...async 函数返回一个 Promise 对象,所以在最外层不能用 await 获取其返回情况下,当然应该用原来方式: then() 来处理这个 Promise 对象。...在没有 await 情况下执行 async 函数,它会立即执行,返回一个 Promise 对象,并且不会阻塞后面的语句,这和普通返回 Promise 对象函数没有区别。

    52230

    c++20协程学习记录(三): co_yield和co_return操作符

    co_yeild 用来简化couter3例子,我们在ReturnObject4里面的promise_type添加一个方法yield_value,这个方法来将协程值赋值给Promise。...为了表示协程结束,C++ 添加了一个co_return 运输符。co_return有3种表达:协程可以使用“ co_return e;”返回最终值e。...promise_type::return_void()和 promise_type::return_value(v)都返回 void;特别是它们不返回可等待对象。...promise_type此时被销毁, h实际上留下了一个悬空指针。然后调用 h.done()这个悬空指针,引发了未定义行为。有些机器上,未定义行为恰好 h.done()返回 false。...同样毫不奇怪,由于我们引发了越来越多未定义行为,我们程序很快就会崩溃。

    39811

    TS 真香系列:你应该知道核心功能

    我建议你切换到较旧版本(单击左上角版本下拉列表),来查看较新版本是怎样处理以前不支持用例: 02 1.可选 从 v3.7 可用 这是当你尝试访问嵌套数据一个痛点,嵌套数据越多,代码就会变得越繁琐...运算符来选择性地对数据访问。通过这种方式,如果存在尚未定义父级对象,则会在任何位置返回未定义,而不是在运行时崩溃。...|| 本质上是 JavaScript 中布尔 OR 运算符,我们尝试利用短路返回一个非 false 值。...例如,当你尝试处理分层数据时,会发现存在相同类型数据重复模式。JSON 是一个很好例子,它本质上是一个哈希映射,而哈希映射本身可以包含另一个映射或映射数组。...对于断言函数,应该添加 asserts as 而不是返回类型。 这样,如果断言通过,TypeScript 将假定参数是前面定义类型。

    2K40

    JavaScript 权威指南第七版(GPT 重译)(五)

    ()函数将一个参数回调作为其最后一个参数。...有时,当设计 API 以使用这种方法时,只有一个对象,并且该对象每个方法都返回对象本身以便于链接。然而,这并不是 Promise 工作方式。...然后,它基于该初始 Promise 构建一个线性 Promise ,并返回最后一个 Promise。这就像设置一排多米诺骨牌,然后推倒第一个。 我们可以采取另一种(可能更优雅)方法。...粗略地说,对于期望或偏好字符串值转换,JavaScript 首先调用对象toString()方法,如果未定义返回原始值,则回退到valueOf()方法。...对于偏好数值转换,JavaScript 首先尝试valueOf()方法,如果未定义返回原始值,则回退到toString()。最后,在没有偏好情况下,它让类决定如何进行转换。

    24210

    前端面试之JavaScript

    (符号),null(空),undefined(未定义)在内存中占据固定大小,保存在栈内存中 引用类型(复杂数据类型): Object(对象)、Function(函数)。...2.函数作用域:在固定代码片段才能被访问 作用:作用域最大用处就是隔离变量,不同作用域下同名变量不会有冲突。 作用域参考链接一般情况下,变量到 创建该变量 函数作用域中取值。...apply接收参数是数组,call接受参数列表,`` bind方法通过传入一个对象,返回一个 this 绑定了传入对象新函数。...->promise1 end->script end->promise2->settimeout async/await async 函数返回一个 Promise 对象,当函数执行时候,一旦遇到 await...利用generate函数特性把异步代码写成“同步”形式,第一个请求返回值作为后面一个请求参数,其中每一个参数都是一个promise对象.

    76720

    7 个好用 TypeScript 新功能

    我建议你切换到较旧版本(单击左上角版本下拉列表),来查看较新版本是怎样处理以前不支持用例: 02 1.可选 从 v3.7 可用 这是当你尝试访问嵌套数据一个痛点,嵌套数据越多,代码就会变得越繁琐...运算符来选择性地对数据访问。通过这种方式,如果存在尚未定义父级对象,则会在任何位置返回未定义,而不是在运行时崩溃。...|| 本质上是 JavaScript 中布尔 OR 运算符,我们尝试利用短路返回一个非 false 值。...例如,当你尝试处理分层数据时,会发现存在相同类型数据重复模式。JSON 是一个很好例子,它本质上是一个哈希映射,而哈希映射本身可以包含另一个映射或映射数组。...对于断言函数,应该添加 asserts as 而不是返回类型。 这样,如果断言通过,TypeScript 将假定参数是前面定义类型。

    1.8K20

    ES11屡试不爽新特性,你用上了几个?

    实例包装成一个Promise实例。...同时,成功和失败返回值是不同,成功时候返回一个结果数组,而失败时候则返回最先被reject失败状态值 let p1 = new Promise((resolve, reject) => {...XXX of undefined,抛出无法从未定义数据中读取某个字段 可选运算符在查找嵌套对象时,找到一个undefined或者null后会立即终止,并返回undefined,而不会不断向下查找而导致抛错...当我们需要条件导入时候,都只能使用require(). 但现在,我们有办法改善此类情况了,因为动态导入可以有效减少使用代码编译,可以提高首屏加载速度,按需加载。...,允许我们匹配一个字符串和一个正则表达式,返回值是所有匹配结果迭代器。

    62442

    ES11屡试不爽新特性,你用上了几个?

    Promise实例包装成一个Promise实例。...同时,成功和失败返回值是不同,成功时候返回一个结果数组,而失败时候则返回最先被reject失败状态值 let p1 = new Promise((resolve, reject) => {...,抛出无法从未定义数据中读取某个字段 可选运算符在查找嵌套对象时,找到一个「undefined」或者「null」后会立即终止,并返回「undefined」,而不会不断向下查找而导致抛错 const...当我们需要条件导入时候,都只能使用require(). 但现在,我们有办法改善此类情况了,因为动态导入可以有效减少使用代码编译,可以提高首屏加载速度,按需加载。...,允许我们匹配一个字符串和一个正则表达式,返回值是所有匹配结果迭代器。

    55510

    JavaScript常见手写题熬夜整理

    类型则作为new方法返回返回,否则返回上述全新对象function myNew(fn, ...args) { // 基于原型 创建一个新对象 let newObj = Object.create...所以这里(^| )意思其实就被拆分为(^)表示匹配username这种情况,它前面什么都没有是一个空串(你可以把(^)理解为^它后面还有一个隐藏'');而|表示就是或者是一个" "(为了匹配user-id...因为其实最后一个cookie项是没有';',所以它可以合并到=([^;]*)这一步。最后获取到match其实是一个长度为4数组。...,涉及到参数合并(类似函数柯里化),因为 bind 需要返回一个函数,需要判断一些边界问题,以下是 bind 实现bind 返回一个函数,对于函数来说有两种方式调用,一种是直接调用,一种是通过 new...方式,我们先来说直接调用方式对于直接调用来说,这里选择了 apply 方式实现,但是对于参数需要注意以下情况:因为 bind 可以实现类似这样代码 f.bind(obj, 1)(2),所以我们需要将两边参数拼接起来最后来说通过

    88630

    解决 JavaScript 中处理 null 和 undefined 麻烦事

    有什么好办法来最大程度地减少由值(可能为 null、undefined或在运行时初始化)引起错误? 在某些情况下,一些语言具有内置功能。...以下是一些最常见来源: 用户输入 数据库/网络记录 初始化状态 函数什么也不会返回 User Input 用户输入 在处理用户输入时,对这些输入进行验证是第一道也是最好防线。...如果你希望对初始化值或空值使用特殊情况,则状态机是更好选择。 新 JavaScript 功能 有几个功能可以帮助你处理 nul 或 undefined 值。...,然后是一个映射到 may 数组上函数,然后是一个 may 数组(一个数组包含一个值,或者什么都不包含),然后返回将该函数应用于数组内容结果,或者返回数组为空时值。...当你在调试中遇到 Maybe 数组时,不必问“这是什么奇怪类型?!”,它只是一个值数组或一个空数组,你已经看到过一百万遍了。

    1.3K20

    每天10个前端小知识 【Day 9】

    在对象实例和它构造器之间建立一个链接(它是__proto__属性,是从构造函数prototype属性派生),之后通过上溯原型,在构造器中找到这些属性和方法 下面举个例子: function Person...我们都知道.then, .catch, .finally都可以链式调用,其本质上是因为返回一个Promise实例。...catch语法形式如下: 1p.catch(onRejected); .catch只会处理rejected情况,并且也会返回一个Promise实例。...如果.catch(onRejected)onRejected回调中返回一个状态为rejectedPromise实例,那么.catch返回Promise实例状态也将变成rejected。...其他情况下,.catch返回Promise实例状态将是fulfilled。 9. 前端怎么实现跨域请求?

    10710

    JavaScript是如何工作:事件循环和异步编程崛起+ 5种使用 asyncawait 更好地编码方式!

    链接调用 Promise 真的很有用: 创建一个延迟2000ms内完成 Promise ,然后我们从第一个then(...)回调中返回,这会导致第二个then(...)等待 2000ms。...p.then(…) 调用本身返回一个 Promise,该 Promise 将被 TypeError 异常拒绝。 处理捕获异常 许多人会说,还有其他更好方法。...一个常见建议是,Promise 应该添加一个 done(…),这实际上是将 Promise 标记为 “done”。done(…) 不会创建并返回 Promise ,因此传递给 done(..)...Promise 对象回调,不管以 then 方法或 catch 方法结尾,要是最后一个方法抛出错误,都有可能无法捕捉到(因为 Promise 内部错误不会冒泡到全局)。...返回错误堆栈不提供错误发生在哪里。

    3.1K20
    领券