绝大多数程序只考虑了接口正常工作的场景，而用户在使用我们的产品时遇到的各类异常，全都丢在看似 ok 的 try catch 中。如果没有做好异常的兼容和兜底处理，会极大的影响用户体验，严重的还会带来安全和资损风险。
接口异常，通常可以分为以下三类：
CGI 逻辑出错。如调用方入参缺失类业务逻辑报错；
服务不稳定。如服务器不稳定导致 nginx 各类 500、502，cgi 路径调整导致的 404
那么，我们在写代码时，如何快速的模拟这些接口异常，做好程序的兼容处理呢？
今天向大家介绍网络调试神器 whistle 的网络异常调试方法，如果你还没用过 whistle，请参考《8102 年的程序员不需要 Hosts 和 Fiddler》。
假设我们有以下前端页面 index.html，放置在自己的本地路径：
<p></p> <p></p> <script> fetch(`/mock?r=${Math.random()}`) .then(response => { return response.json() }) .then(v => { document.getElementById('success').innerHTML = v.data; }).catch(err => { document.getElementById('fail').innerHTML = err.message; }) </script>接下来，打开 whistle Rules 配置面板 ，配置模拟的 demo page 和 mock CGI：
*/mock file://({"code":0,"data":"success"}) # 配置 mock cgi 为模拟的 json 数据 example.com file:///Users/kaiye/Projects/Markdown/20181213/ # 配置任意域名到本地 demo 目录，这里注意替换成自己的路径打开 ，正常逻辑下页面展示出了绿色的 success ，现在我们开始加入一些网络异常。
1、业务逻辑异常处理例如 CGI 没有返回 data 字段，而是返回了一个错误码 code 和对应的 message，针对这种业务逻辑异常我们只需在第二个 then 中做好 code 值的判断即可（注意，这里的 code、message、data 只是示例，实际业务 CGI 中的 JSON 结构体的字段名很可能不同）：
fetch(`/mock?r=${Math.random()}`) .then(response => response.json()) .then((v) => { // 业务逻辑异常处理 if (v.code !== 0) { return Promise.reject(new Error(`ERROR_LOGIC_CODE:${v.code}`)); } document.getElementById('success').innerHTML = v.data; }) .catch((err) => { document.getElementById('fail').innerHTML = err.message; });相应的 whistle 配置如下：
*/mock file://({"code":12345,"message":"some_logic_error"}) # 模拟业务逻辑异常 2、服务器异常处理如果服务器直接抛出了 502 错误码，我们希望代码能给用户提示的同时，再做一个异常上报。
fetch(`/mock?r=${Math.random()}`) .then((response) => { // 服务器异常处理 if (response.ok) { return response.json(); } return Promise.reject(new Error(`ERROR_STATUS_CODE:${response.status}`)); }) .then((v) => { // 业务逻辑异常处理 if (v.code !== 0) { return Promise.reject(new Error(`ERROR_LOGIC_CODE:${v.code}`)); } document.getElementById('success').innerHTML = v.data; }) .catch((err) => { const [type, value] = err.message.split(':'); // 异常类型上报 console.log(type, value); document.getElementById('fail').innerHTML = err.message; });通过 whistle 的模拟配置如下：
*/mock statusCode://502 # 模拟 HTTP 状态码异常 3、接口被劫持注入如果 CGI 被运营商劫持注入，可能导致接口返回一个不合法的 JSON 结构，最前面的 response.json() 会抛异常，我们可以提前 catch 住：
fetch(`/mock?r=${Math.random()}`).then((response) => { // 服务器异常处理 if (response.ok) { return ( response .json() // 接口数据解码异常处理 .catch(err => Promise.reject(new Error('ERROR_DECODE_JSON'))) ); } return Promise.reject(new Error(`ERROR_STATUS_CODE:${response.status}`)); });whistle 模拟配置如下：
*/mock file://(<div>hijacking</div>{"code":0,"data":"success"}) # 模拟接口被劫持注入 1借助 htmlAppend 和 values 配置，可以模拟更复杂的注入示例：
*/mock file://({"code":0,"data":"success"}) htmlAppend://{hijacking.html} # 模拟接口被劫持注入 2 ```hijacking.html <script> alert('hijacking') </script> ``` 4、用户网络不稳定如果我们要模拟请求发出 10 秒后断网或网络不通的情况，可以通过 whistle 这样配置：
*/mock reqDelay://10000 enable://abort # 模拟 10 秒超时后网络不通让用户苦苦等待 10 秒，再报错的体验太糟糕。我们可以封装一个能配置超时时间的请求发送函数，同时把上面提到的错误异常都一起配置进来。
<p></p> <p></p> <script> function myFetch(url, configOptions) { const options = Object.assign( { timeout: 3000 }, configOptions ) const { timeout } = options return new Promise((resolve, reject) => { // 超时异常处理 const timer = setTimeout(() => { reject(new Error(`ERROR_TIMEOUT:${timeout}`)) }, timeout) fetch(url, options) .then(data => { clearTimeout(timer) resolve(data) }) .catch(err => { clearTimeout(timer) reject(err) }) }) .then(response => { // 服务器异常处理 if (response.ok) { return ( response .json() // 接口数据解码异常处理 .catch(err => Promise.reject(new Error('ERROR_DECODE_JSON'))) ) } else { return Promise.reject( new Error(`ERROR_STATUS_CODE:${response.status}`) ) } }) .then(v => { // 业务逻辑异常处理 if (v.code !== 0) { return Promise.reject(new Error(`ERROR_LOGIC_CODE:${v.code}`)) } else { return v.data } }) .catch(err => { const [type, value] = err.message.split(':') // 异常类型上报 console.log(type, value) return Promise.reject(err) }) } myFetch(`/mock?r=${Math.random()}`) .then(data => { document.getElementById('success').innerHTML = data }) .catch(err => { document.getElementById('fail').innerHTML = err.message }) </script>这样，自定义的 myFetch 只需关注业务具体逻辑，针对不同的 catch error 做对应的处理。