iT邦幫忙

0

使用setInterval 定期更新 api 資料 會影響效能嗎

說明

如題 我用React.js 寫,不過觀念是相通

componentDidMount是載入component後會執行的function
getAPI是從網址抓取資料下來給component使用
而我想做的事情是讓componentDidMount每100毫秒就執行getAPI
這樣就能做出及時更新資料的效果了

問題

那我想問的是說 我這樣一直重複執行抓取API資料影響效能嗎?

程式碼

  componentDidMount() {
    setInterval(this.getAPi, 100);
  }
  getAPI() {
    axios
      .get(
        `http://ptx.transportdata.tw/MOTC/v2/Bike/Availability/${this.state
          .city}`
      )
      .then(response => {
        console.log(response);
        this.setState({ information: response.data });
        console.log(this.state.information);
      })
      .catch(error => {
        console.log(error);
      });
  }

2 個回答

0
fysh711426
iT邦新手 4 級 ‧ 2017-11-11 20:57:53

時間拉太短會,100毫秒覺得有點太短了,
可以把更新時間拉長一點,或使用其他技術,
效能可以分 Client 端和 Server 端,
Client 端可能還好,Server 端用的人越多負擔越大,
小弟我現如果需要做即時更新功能,會用 WebSocket 來做,
推薦一個封裝 WebSocket 的套件 SignalR
http://blog.darkthread.net/post-2013-12-05-signalr-transport-benchmark-bidirection.aspx
WebSocket 目前只有現代瀏覽器支援,
SignalR 很厲害的一點,如果遇到不支援 WebSocket 的瀏覽器或伺服器會自動向下相容其他技術,
WebSocket -> Server Sent Event -> Forever Frame -> Long Polling

SignalR WebSocket 啟動條件:

  • Client: 現代化瀏覽器 (IE10+或其他瀏覽器)
  • Server: .NET Framework 4.5 以上 + Windows 8 或 Windows 2012 以上
Luis-Chen iT邦新手 5 級 ‧ 2017-11-12 10:44:57 檢舉

感謝你 我立馬去試

我後來看了您用的 API,
好像是政府提供的,那我提供的幾種方法都不能實現了,
因為都必須 Server 配合,自己寫的 API 才可以,或是對方有支援。
/images/emoticon/emoticon37.gif

Rach iT邦新手 5 級 ‧ 2017-11-14 10:16:17 檢舉

我一開始也以為要做即時對方是直接開websocket通道,讓對方收到即時推播的訊息,並且訂閱他的推播

5
海綿寶寶
iT邦超人 1 級 ‧ 2017-11-13 00:01:13

在你繼續寫下去之前
請先看一下資料使用注意事項
其中第一條已經寫得很明白
「加值業者務必自建後台」

練習寫程式抓資料是一回事
如果真的要寫成產品,就得多考慮些事情

你如果真的用100毫秒的時隔去 call API
別說因為流量太大被停權
說不定不用兩小時就被當成駭客或是DDOS攻擊
被擋在門外了
/images/emoticon/emoticon77.gif

Luis-Chen iT邦新手 5 級 ‧ 2017-11-13 09:43:44 檢舉

感謝大大提點 後來才想到我朋友他寫opendata的專案 也是把API資料存進 firebase的real-time-database

是的
因為政府的opendata原則是「提供資料,不提供即時查詢服務」
由廠商把資料「抓」回自己的server後
就不關政府的事了
屆時你要設10毫秒查一次自己的server
也沒人管你囉
/images/emoticon/emoticon01.gif

我要發表回答

立即登入回答