使用whistle模拟cgi接口異常：錯誤碼、502、慢網速、逾時

絕大多數程式隻考慮了接口正常工作的場景，而使用者在使用我們的産品時遇到的各類異常，全都丢在看似 ok 的 try catch 中。如果沒有做好異常的相容和兜底處理，會極大的影響使用者體驗，嚴重的還會帶來安全和資損風險。

接口異常，通常可以分為以下三類：

• CGI 邏輯出錯。如調用方入參缺失類業務邏輯報錯；
• 服務不穩定。如伺服器不穩定導緻 nginx 各類 500、502，cgi 路徑調整導緻的 404
• 使用者網絡環境差。如，網絡不穩定、網速慢、營運商劫持等

那麼，我們在寫代碼時，如何快速的模拟這些接口異常，做好程式的相容處理呢？

今天向大家介紹網絡調試神器 whistle 的網絡異常調試方法，如果你還沒用過 whistle，請參考《8102 年的程式員不需要 Hosts 和 Fiddler》。

假設我們有以下前端頁面 index.html，放置在自己的本地路徑：

<p id="success" style="color:green;"></p>
<p id="fail" style="color:red;"></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 配置面闆 http://127.0.0.1:8899/#rules ，配置模拟的 demo page 和 mock CGI：

*/mock file://({"code":0,"data":"success"}) # 配置 mock cgi 為模拟的 json 資料
example.com file:///Users/kaiye/Projects/Markdown/20181213/ # 配置任意域名到本地 demo 目錄，這裡注意替換成自己的路徑      

打開 http://example.com ，正常邏輯下頁面展示出了綠色的 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 id="success" style="color:green;"></p>
<p id="fail" style="color:red;"></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 做對應的處理。

除以上提到的協定指令字外，whistle 還支援

resSpeed

用于模拟低網速傳輸（機關：kb/s），

tpl

協定則可以根據請求傳入參數來動态模拟不同的資料。在 Frames 面闆，還可以對 WebSocket/Socket 請求進行暫停、延遲等網絡異常的模拟。

小程式 fetch API 實作

最後，留一道思考題。

近來微信小程式開發非常火，小程式原生提供的 wx.request API 能用于發送 HTTPS 請求，請在它的基礎之上進行封裝，支援 promise 調用和

timeout

逾時時間定義（小程式預設的請求逾時定義在 app.json 中，不夠靈活），并針對以上提到的 HTTP 狀态碼異常、接口劫持注入、慢網絡、無網絡狀态等各種網絡異常進行相容處理。

歡迎留言分享你的代碼實作，在公衆号「貓哥學前班」中回複關鍵詞

request

，可以參考我的實作和 whistle rules 配置。

歡迎關注我的微信公衆号「貓哥學前班」