理解Promise then处理函数语法语义及不同写法的差异疑问

1. 三种then写法表现不同的原因 #

首先写法#1的问题你理解的是正确的：ProgressBar_OFF()没有返回值，默认返回undefined，箭头函数单行写法会隐式返回这个undefined，导致后续.then接收的参数变成undefined，如果后续逻辑需要用到接口返回的html内容，自然会运行异常。

而理论上写法#2（带块的箭头函数）和写法#3（普通函数）在不涉及this指向的场景下行为完全一致，二者出现运行差异的唯一原因是运行环境不支持ES6箭头函数语法：

• 比如在IE11及更早版本的浏览器中，箭头函数属于语法错误，会直接导致整段JS代码执行中断，自然表现为运行异常
• 写法#3是ES5标准的普通函数语法，所有浏览器都原生支持，因此运行正常

2. 关于Promise then的返回值规则 #

.then 的回调函数无论返回什么内容，都会被自动包装为Promise对象：

• 如果回调返回非Promise值，会被包装为fulfilled状态的Promise，值为回调的返回值
• 如果回调抛出异常，会被包装为rejected状态的Promise，值为抛出的错误
• 如果回调本身返回Promise，.then 会直接返回这个Promise，继承它的状态和值

3. 关于写法#2不生效的疑问 #

你对规则的理解是正确的，写法#2逻辑上没有问题：先执行ProgressBar_OFF()关闭进度条，再返回resp传递给后续的.then。运行异常的本质还是语法层面不支持箭头函数，和逻辑无关。

4. 关于resp => console.log(resp)类写法的疑问 #

console.log()本身没有返回值，默认返回undefined，因此resp => console.log(resp)的返回值是undefined，并不会返回resp本身。
这类写法在示例中常见的原因是：示例的后续.then不需要用到前一步的返回值，如果后续逻辑需要用到前一步的resp，这类写法就会导致后续拿到的值为undefined，属于错误写法。

5. 关于resp => $("#placeholder").html(resp)是否有问题的疑问 #

jQuery的.html()方法传入内容时，返回值是当前jQuery对象本身，并不是你传入的resp内容。因此：

• 如果后续的.then不需要用到接口返回的html内容，这个写法没有问题
• 如果后续的.then还需要用到返回的html内容，这个写法会导致后续拿到的值是jQuery对象，而非原html字符串，此时需要手动返回resp：

.then( resp => { $("#placeholder").html(resp); return resp; } )

学习资料推荐 #

可以查阅ES6标准中Promise、箭头函数相关的语法文档，以及现代JavaScript异步编程相关的专业书籍进行系统学习。

内容的提问来源于stack exchange，提问作者Zoltan Hernyak