如何彻底解决JavaScript前端超时异步操作的所有潜在问题？

本文共计1852个文字，预计阅读时间需要8分钟。

目录+如果一段代码久久不能执行完成，会怎样样？+Axios+自带超时处理+处理+fetch() +超时+万物皆可超时+自从ECMAScript的Promise ES2015和async/await ES2017特性发布后，异步在前端界已经变得很常见

目录

• 如果一段代码久久不能执行完成，会怎么样？
• Axios 自带超时处理
• 处理 fetch() 超时
• 万物皆可超时

自从 ECMAScript 的 Promise ES2015 和 async/await ES2017 特性发布以后，异步在前端界已经成为特别常见的操作。异步代码和同步代码在处理问题顺序上会存在一些差别，编写异步代码需要拥有跟编写同步代码不同的“意识”。

如果一段代码久久不能执行完成，会怎么样？

如果这是同步代码，我们会看到一种叫做“无响应”的现象，或者通俗地说 —— “死掉了”；但是如果是一段异步代码呢？可能我们等不到结果，但别的代码仍在继续，就好像这件事情没有发生一般。

当然事情并不是真的没发生，只不过在不同的情况下会产生不同的现象。比如有加载动画的页面，看起来就是一直在加载；又比如应该进行数据更新的页面，看不到数据变化；

再比如一个对话框，怎么也关不掉 …… 这些现象我们统称为 BUG。但也有一些时候，某个异步操作过程并没有“回显”，它就默默地死在那里，没有人知道，待页面刷新之后，就连一点遗迹都不会留下。

Axios 自带超时处理

使用 Axios 进行 Web Api 调用就是一种常见的异步操作过程。