99%的程序都沒有考慮的網(wǎng)絡(luò)異常

HollisChuang 發(fā)布于2019-08-23 14:19 / 2059人閱讀

摘要：本文由云社區(qū)發(fā)表絕大多數(shù)程序只考慮了接口正常工作的場(chǎng)景，而用戶在使用我們的產(chǎn)品時(shí)遇到的各類異常，全都丟在看似的中。在面板，還可以對(duì)請(qǐng)求進(jìn)行暫停延遲等網(wǎng)絡(luò)異常的模擬。小程序?qū)崿F(xiàn)最后，留一道思考題。

本文由云+社區(qū)發(fā)表

絕大多數(shù)程序只考慮了接口正常工作的場(chǎng)景，而用戶在使用我們的產(chǎn)品時(shí)遇到的各類異常，全都丟在看似 ok 的 try catch 中。如果沒有做好異常的兼容和兜底處理，會(huì)極大的影響用戶體驗(yàn)，嚴(yán)重的還會(huì)帶來(lái)安全和資損風(fēng)險(xiǎn)。

接口異常，通?？梢苑譃橐韵氯悾?/p>

CGI 邏輯出錯(cuò)。如調(diào)用方入?yún)⑷笔ь悩I(yè)務(wù)邏輯報(bào)錯(cuò)；

服務(wù)不穩(wěn)定。如服務(wù)器不穩(wěn)定導(dǎo)致 nginx 各類 500、502，cgi 路徑調(diào)整導(dǎo)致的 404

用戶網(wǎng)絡(luò)環(huán)境差。如，網(wǎng)絡(luò)不穩(wěn)定、網(wǎng)速慢、運(yùn)營(yíng)商劫持等

那么，我們?cè)趯懘a時(shí)，如何快速的模擬這些接口異常，做好程序的兼容處理呢？

今天向大家介紹網(wǎng)絡(luò)調(diào)試神器 whistle 的網(wǎng)絡(luò)異常調(diào)試方法，如果你還沒用過(guò) whistle，請(qǐng)參考《8102 年的程序員不需要 Hosts 和 Fiddler》。

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

接下來(lái)，打開 whistle Rules 配置面板 http://127.0.0.1:8899/#rules ，配置模擬的 demo page 和 mock CGI：

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

打開 http://example.com ，正常邏輯下頁(yè)面展示出了綠色的 success ，現(xiàn)在我們開始加入一些網(wǎng)絡(luò)異常。

1、業(yè)務(wù)邏輯異常處理

例如 CGI 沒有返回 data 字段，而是返回了一個(gè)錯(cuò)誤碼 code 和對(duì)應(yīng)的 message，針對(duì)這種業(yè)務(wù)邏輯異常我們只需在第二個(gè) then 中做好 code 值的判斷即可（注意，這里的 code、message、data 只是示例，實(shí)際業(yè)務(wù) CGI 中的 JSON 結(jié)構(gòu)體的字段名很可能不同）：

fetch(`/mock?r=${Math.random()}`)
  .then(response => response.json())
  .then((v) => {
    // 業(yè)務(wù)邏輯異常處理
    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;
  });

相應(yīng)的 whistle 配置如下：

*/mock file://({"code":12345,"message":"some_logic_error"}) # 模擬業(yè)務(wù)邏輯異常

2、服務(wù)器異常處理

如果服務(wù)器直接拋出了 502 錯(cuò)誤碼，我們希望代碼能給用戶提示的同時(shí)，再做一個(gè)異常上報(bào)。

fetch(`/mock?r=${Math.random()}`)
  .then((response) => {
    // 服務(wù)器異常處理
    if (response.ok) {
      return response.json();
    }
    return Promise.reject(new Error(`ERROR_STATUS_CODE:${response.status}`));
  })
  .then((v) => {
    // 業(yè)務(wù)邏輯異常處理
    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(":");
    // 異常類型上報(bào)
    console.log(type, value);
    document.getElementById("fail").innerHTML = err.message;
  });

通過(guò) whistle 的模擬配置如下：

*/mock statusCode://502 # 模擬 HTTP 狀態(tài)碼異常

3、接口被劫持注入

如果 CGI 被運(yùn)營(yíng)商劫持注入，可能導(dǎo)致接口返回一個(gè)不合法的 JSON 結(jié)構(gòu)，最前面的 response.json() 會(huì)拋異常，我們可以提前 catch ?。?/p>

fetch(`/mock?r=${Math.random()}`).then((response) => {
  // 服務(wù)器異常處理
  if (response.ok) {
    return (
      response
        .json()
        // 接口數(shù)據(jù)解碼異常處理
        .catch(err => Promise.reject(new Error("ERROR_DECODE_JSON")))
    );
  }
  return Promise.reject(new Error(`ERROR_STATUS_CODE:${response.status}`));
});

whistle 模擬配置如下：

*/mock file://(hijacking
{"code":0,"data":"success"}) # 模擬接口被劫持注入 1

借助 htmlAppend 和 values 配置，可以模擬更復(fù)雜的注入示例：

*/mock file://({"code":0,"data":"success"}) htmlAppend://{hijacking.html} # 模擬接口被劫持注入 2

4、用戶網(wǎng)絡(luò)不穩(wěn)定

如果我們要模擬請(qǐng)求發(fā)出 10 秒后斷網(wǎng)或網(wǎng)絡(luò)不通的情況，可以通過(guò) whistle 這樣配置：

*/mock reqDelay://10000 enable://abort # 模擬 10 秒超時(shí)后網(wǎng)絡(luò)不通

讓用戶苦苦等待 10 秒，再報(bào)錯(cuò)的體驗(yàn)太糟糕。我們可以封裝一個(gè)能配置超時(shí)時(shí)間的請(qǐng)求發(fā)送函數(shù)，同時(shí)把上面提到的錯(cuò)誤異常都一起配置進(jìn)來(lái)。

這樣，自定義的 myFetch 只需關(guān)注業(yè)務(wù)具體邏輯，針對(duì)不同的 catch error 做對(duì)應(yīng)的處理。

除以上提到的協(xié)議命令字外，whistle 還支持 resSpeed 用于模擬低網(wǎng)速傳輸（單位：kb/s），tpl 協(xié)議則可以根據(jù)請(qǐng)求傳入?yún)?shù)來(lái)動(dòng)態(tài)模擬不同的數(shù)據(jù)。在 Frames 面板，還可以對(duì) WebSocket/Socket 請(qǐng)求進(jìn)行暫停、延遲等網(wǎng)絡(luò)異常的模擬。

小程序 fetch API 實(shí)現(xiàn)

最后，留一道思考題。

近來(lái)微信小程序開發(fā)非?；?，小程序原生提供的 wx.request API 能用于發(fā)送 HTTPS 請(qǐng)求，請(qǐng)?jiān)谒幕A(chǔ)之上進(jìn)行封裝，支持 promise 調(diào)用和 timeout 超時(shí)時(shí)間定義（小程序默認(rèn)的請(qǐng)求超時(shí)定義在 app.json 中，不夠靈活），并針對(duì)以上提到的 HTTP 狀態(tài)碼異常、接口劫持注入、慢網(wǎng)絡(luò)、無(wú)網(wǎng)絡(luò)狀態(tài)等各種網(wǎng)絡(luò)異常進(jìn)行兼容處理。

歡迎留言分享你的代碼實(shí)現(xiàn)

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布

GPU云服務(wù)器云服務(wù)器沒有備案的小程序需要考慮的因素有有沒有免費(fèi)的小程序沒有網(wǎng)絡(luò)的云服務(wù)器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100424.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

HollisChuang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

AB32VG1 按鍵控制LED

閱讀 1905·2021-11-23 09:51
11月最新編程排行榜出爐，這個(gè)語(yǔ)言超過(guò)了C蟬聯(lián)榜首~

閱讀 1549·2021-11-19 09:40
DediPath：全場(chǎng)VPS和hybrid混合服務(wù)器5折，美國(guó)圣何塞/西雅圖機(jī)房，$10/年起

閱讀 3221·2021-11-11 11:01
PHP+MySQL實(shí)現(xiàn)簡(jiǎn)單的登錄注冊(cè)案例（詳細(xì)版附代碼）

閱讀 1120·2021-09-27 13:34
獨(dú)享云虛擬主機(jī)怎么用-云主機(jī)與虛擬主機(jī)有什么區(qū)別？

閱讀 1852·2021-09-22 15:56
SASS學(xué)習(xí)記錄

閱讀 2136·2019-08-30 15:52
CSS基礎(chǔ)知識(shí)點(diǎn)整理

閱讀 1071·2019-08-30 14:13
前端面試題-漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

閱讀 3487·2019-08-30 14:10

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

99%的程序都沒有考慮的網(wǎng)絡(luò)異常

相關(guān)文章