promise.then() 的大坑

最新推荐文章于 2022-11-24 12:55:08 发布
原创 最新推荐文章于 2022-11-24 12:55:08 发布 · 291 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这次想用promise.then 做一个异步请求

addTable().then(resolve())   注：这是错误写法，没有一部效果

addTable().then(（）=> {  resolve()  })   注：这是正确的

【高频考点精讲】Promise.all和Promise.race的区别，90%的人都用错了
全栈老李的博客
06-17 1207
Promise.all和Promise.race是处理异步操作的利器，但要用对场景。all适合"全部都要"的场景，race适合"谁快用谁"的情况。all是"与"关系（所有成功才算成功）race是"或"关系（第一个完成的就是结果）我是全栈老李，下期我们聊聊async/await的底层实现原理，看看Generator和Promise是如何完美配合的。
小程序开发中对js异步处理callback风格和promise风格的一些思考
xuezihan_mad的博客
10-10 4150
今天在学习小程序开发的过程中，发现异步处理函数有两种书写风格，其一为callback，这是接触js以来，我自己一直的写法，其二为promise风格，个人感觉promise风格更为简便，有效地避免了回调金字塔这种大坑，下面展示一下区别 使用callback风格书写的函数：   // 模拟获取code，然后将code传给后台，成功后获取userinfo，再将userinfo传给后台 // 登录...
JavaScript异步编程4——Promise错误处理
人生海海 山山而川
05-04 582
论述了Promise如何进行错误处理。
Promise构造函数的错误处理
lxtlog的博客
03-01 423
1. then()方法 then是Promise构造函数的实例方法。第一个参数是成功状态的回调函数，第二个参数是失败状态的回调函数。 new Promise((resolve, reject) => { reject('error') }).then(data => { console.log(data) }, error => { console.log(error) // error }) 2. catch()方法 catch是Promise构造函数的实例方法。实...
promise
Ellie棒棒哒的博客
04-06 708
文章目录Promise基本使用对比不同回调方式promise APIpromise的几个关键问题如何改变promise的状态？改变promise状态 和 指定回调函数 谁先谁后promise.then()返回的新promise的结果状态由什么决定 (重点)asyn和await宏队列和微队列 Promise是JS中进行异步编程的新的解决方案(旧的是纯回调) 语法上: Promise是一个构造函数 ...
promise 中有多个.then回调，报错执行情况
weixin_48728002的博客
08-16 1839
promise
promise.then返回结果几种情况
m0_60909419的博客
04-12 1万+
首先实例化一个promise对象。promise对象身上有then方法，可用来指定回调，对成功和失败的结果进行处理。它接受两个回调函数，一个是resolve成功的回调，一个是reject失败的回调。 const p = new Promise((resolve, reject) => { setTimeout(() => { resolve('成功的回调'); // reject('失败的回调'); }, 1000); }); p.then(v
setTimeout async/await promise执行顺序 详解
m0_53316381的博客
04-03 503
第一次面试，就挂在了 异步执行顺序上，setTimeout async/await promise的执行顺序，搞不清楚，看了许多博客，但在关键点不是很详细。 可以先看一下大佬的解释： 网页链接 async function async1() { console.log('async1 start') await async2() console.log('async1 end') } async function async2() { console.log('async2') }
Promise发展的心路历程
Chashg的博客
02-13 360
Promise 发展的心路历程 浅谈啥是异步 在这篇博文中，将会用最简单的例子，简单快速说明什么是异步，回调函数最大的问题是什么——不再是江湖传言的回调地狱。同时，这里默认大家都知道 promise 基本使用方式，故一些关于如何使用的 demo 不再给出，本文主要是想聊一聊 promise 是如何发展得到的，看一看这段心路历程。 一个场景-什么是异步 我们可以把程序的运行分为现在正在运行的和将来运行的。想象一个场景，当我们运行到 A 行代码的时候，这一行发出一个请求希望得到一个数据，拿到数据后，接下来下一行
记录promise解决js与oc交互中异步回调的实践
努力努力再努力w
12-04 622
项目需求：更改h5与客户端（安卓，ios交互）的交互方法，使用第三方jsBridge 因为使用了js来定义方法，oc调用的模式（大坑） 导致兼容，页面刷新，客户端外调用等情况 难以解决 （因为需要，在交互方法之后进行判断，从而执行回调，而交互无法判断何时执行完毕） 面临的问题就是需要解决异步回调。 其中尝试了promise： 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事...
【JavaScript 基础】-- Promise中的then、catch、finally总结
野生松
05-21 4万+
总结： 1、Promise的状态一经改变就不能再改变。 const promise = new Promise((resolve, reject) => { resolve("success1"); reject("error"); resolve("success2"); }); promise .then(res => { console.log("then: ", res); }).catch(err => { console.log("catc
Promise
qq_45178972的博客
03-31 1265
1.Promise解决的不是回调函数，而是回调地狱 2.Promise的状态一旦变化，就不会再改变了，比如调用resolve()后再调用reject()，状态还是fullfilled 3.then方法返回一个新的Promise对象 then()向后传值 const p = new Promise((resolve,reject)=>{ reject() // resolve() }) p.then( ()=>{ console.log('success'); },(data)=&
Promise错误处理
wwwanglong123的博客
02-27 3258
1. then()方法 then是Promise构造函数的实例方法。第一个参数是成功状态的回调函数，第二个参数是失败状态的回调函数。 new Promise((resolve, reject) => { reject('error') }).then(data => { console.log(data) }, error => { console.log(error) // error }) 2. catch()方法 catch是Promise构造函数的实例方法。实际上是
（基础）Promise中then()方法使用，多次调用、链式调用
次顶级的博客
12-16 1万+
Promise可以被多次调用then方法，链式调用
Promise错误处理比较：使用then的第二个参数还是catch
程序员诚哥
11-24 800
如果在then的第一个函数里抛出了异常，后面的catch能捕获到，而then的第二个函数捕获不到。"4: 只有error,没有catch，then里面又抛出error。//此时只有then的第二个参数可以捕获到Promise内部抛出的错误信息。//此时只有then的第二个参数可以捕获到Promise内部抛出的错误信息。//此时catch可以捕获到Promise内部抛出的错误信息。"5: 只有catch，then里面又抛出error"//此时只有then的第二个参数可以捕获到错误信息。"2:只有catch"
Promise细小知识点梳理
qq_21522331的博客
12-01 659
1.Promise用于解决异步流程化的问题 2.Promise的构造函数主要用于包装不支持Promise的函数 3.Promise.all方法的参数是一个可迭代对象(iterable)，也就是说传入一个String也可以 4.Promise.all当且仅当传入的可迭代对象为空时为同步 (Promise.all的3.4两个特点在Promise的其它静态方法中也类似) var p = Promise.all([]); // will be immediately resolved var p2 = Promis
await和.then同时使用报错的问题
qq_37827020的博客
11-16 2355
await和.then同时使用报错的问题
Promise 错误和then连用
weixin_40802058的博客
03-11 3502
console.log('here we go') new Promise(resolve=>{ setTimeout(()=>{ resolve(); },1000) }) .then(()=>{ console.log('start'); throw new Error('test error') }) .catch(er...
《ES6标准入门》（六）之Promise对象2——then()和catch()方法
热门推荐
眼里长着太阳，笑里全是坦荡
07-07 10万+
1.Promise.prototype.then()方法Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。then方法返回的是一个新的Promise实例（注意，不是...
promise. then
最新发布
11-13
<think> 我们正在详细解释JavaScript中Promise对象的then方法。根据引用[2]，Promise的设计思想是所有异步任务返回一个Promise实例，该实例有一个then方法用于指定下一步的回调函数。引用[3]和[4]展示了then方法的使用示例。 then方法是Promise的核心，用于处理Promise的完成（fulfilled）或拒绝（rejected）状态。它的基本语法如下： ```javascript promise.then( onFulfilled, // 当Promise状态变为fulfilled时调用的函数，接收完成值作为参数 onRejected // 当Promise状态变为rejected时调用的函数，接收拒绝原因作为参数（可选） ); ``` ### 1. then方法的基本使用 - **处理完成状态**：当Promise被resolve时，执行`onFulfilled`回调 ```javascript new Promise((resolve) => resolve('成功')).then(value => console.log(value)); // 输出"成功" ``` - **处理拒绝状态**：当Promise被reject时，执行`onRejected`回调 ```javascript new Promise((_, reject) => reject('失败')).then(null, reason => console.log(reason)); // 输出"失败" ``` ### 2. then方法的链式调用（引用[4]） then方法返回一个新的Promise，支持链式调用： ```javascript loadScript('one.js') .then(script => loadScript('two.js')) // 返回新Promise .then(script => loadScript('three.js')) .then(script => { one(); two(); three(); }); ``` 链式调用的规则： 1. 如果前一个`then`的回调返回普通值（非Promise），该值作为下一个`then`的输入 ```javascript Promise.resolve(1) .then(v => v + 2) // 返回3 .then(v => console.log(v)); // 输出3 ``` 2. 如果回调返回Promise，则下一个`then`等待该Promise解决 ```javascript Promise.resolve(1) .then(v => new Promise(resolve => setTimeout(() => resolve(v + 2), 1000))) .then(v => console.log(v)); // 1秒后输出3 ``` ### 3. 错误处理（引用[3]） - 通过`then`的第二个参数`onRejected`捕获错误 ```javascript Promise.reject('error') .then( value => console.log('成功', value), reason => console.log('失败', reason) // 捕获并输出"失败 error" ); ``` - 更推荐使用`catch`方法统一捕获链式调用中的错误： ```javascript Promise.resolve() .then(() => { throw new Error('错误') }) .catch(err => console.error(err)); // 捕获错误 ``` ### 4. 注意事项 1. **状态不可逆**（引用[3]）：Promise状态一旦确定（fulfilled/rejected）就不能更改 ```javascript const p = new Promise((resolve, reject) => { resolve('成功'); // 状态锁定为fulfilled reject('失败'); // 无效 }); ``` 2. **回调执行时机**：`then`的回调属于微任务，在当前宏任务结束后执行[^2][^3] ```javascript console.log('开始'); Promise.resolve().then(() => console.log('微任务')); console.log('结束'); // 输出顺序：开始 → 结束 → 微任务 ``` 3. **透传特性**：当`then`缺少处理函数时，值会“穿透”到后面的处理函数 ```javascript Promise.resolve('穿透') .then() .then(v => console.log(v)); // 输出"穿透" ``` ### 5. 使用场景 - **异步流程控制**：解决回调地狱，实现顺序异步操作（如引用[4]的脚本加载） - **错误集中处理**：通过`catch`统一处理多个异步操作的错误 - **并行异步管理**：结合`Promise.all`/`Promise.race`等类方法 --- §§相关问题§§ 1. Promise的catch方法和then的第二个参数有何区别？ 2. 如何中断Promise链式调用？ 3. Promise.all和Promise.race的使用场景有什么不同？ 4. async/await与Promise.then有何性能差异？ [^1]: Promise.resolve相当于new Promise并执行resolve操作 [^2]: Promise的设计思想与基本状态 [^3]: Promise状态不可逆及then方法执行机制 [^4]: then方法链式调用实现异步任务序列 </think>### JavaScript Promise 的 `then` 方法详解 `then` 方法是 Promise 最核心的实例方法，用于处理 Promise 的**异步操作结果**（成功或失败）。其语法为： ```javascript promise.then( onFulfilled, // 成功回调 (必选) onRejected // 失败回调 (可选) ); ``` #### 一、核心特性 1. **链式调用** `then` 始终返回**新的 Promise 对象**，支持无限链式调用： ```javascript fetchData() .then(handleSuccess) // 第一个then处理成功 .then(processData) // 接收上一步返回值 .catch(handleError); // 统一捕获错误 ``` 引用[4]展示了链式加载脚本的经典案例[^4]。 2. **值传递与穿透** - 若回调返回普通值，直接传递给下一个 `then`： ```javascript Promise.resolve(2) .then(v => v * 3) // 返回6 .then(v => console.log(v)); // 输出6 ``` - 若未提供回调，值会"穿透"到后续 `then`： ```javascript Promise.resolve('穿透') .then() // 无回调 .then(v => console.log(v)); // 输出"穿透" ``` 引用[3]提到状态不可逆特性[^3]。 3. **错误处理优先级** - 优先使用当前 `then` 的 `onRejected` - 若无定义，则错误冒泡到后续 `catch`： ```javascript Promise.reject('error') .then(null, reason => console.log('捕获')) // 触发此处理 .catch(err => console.log('不会执行')); ``` --- #### 二、使用场景 1. **异步流程控制** ```javascript // 模拟异步操作链 login(user) .then(token => fetchUserData(token)) .then(data => renderProfile(data)); ``` 2. **组合多个 Promise** ```javascript const p1 = fetch('/api/a'); const p2 = fetch('/api/b'); p1.then(resA => p2.then(resB => combine(resA, resB)) ); ``` 3. **延迟执行** ```javascript const delay = (ms) => new Promise(res => setTimeout(res, ms)); delay(1000) .then(() => console.log('1秒后执行')); ``` --- #### 三、注意事项 1. **回调执行时机** 回调属于**微任务**，在同步代码执行后、渲染前触发（引用[3]）[^3]。 2. **避免嵌套陷阱** ❌ 错误写法（回调地狱变体）： ```javascript fetchA().then(a => { fetchB(a).then(b => { // 嵌套then // ... }); }); ``` ✅ 正确写法（链式展开）： ```javascript fetchA() .then(a => fetchB(a)) .then(b => { /* ... */ }); ``` 3. **必须提供 onFulfilled** 若省略 `onFulfilled`，需用 `null` 占位： ```javascript promise.then(null, onRejected); // 仅处理错误 ``` --- ### 回调函数参数说明 | **参数** | **类型** | **触发条件** | **返回值影响** | |----------------|--------------|---------------------|--------------------------------| | `onFulfilled` | `Function` | Promise resolve 时 | 返回值作为新 Promise 的决议值 | | `onRejected` | `Function` | Promise reject 时 | 返回值作为新 Promise 的决议值 | ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值