GitHub API contents file date 亂碼解決方法
前言
這幾天在使用 GitHub API 中的一個 API 方法發現 content 會出現亂碼問題,這邊紀錄一下該如何解決 content 亂碼
contents
以下範例將會使用我 repos 中的 JSON 來作範例 → 連結
首先依照 GitHub API content 文件 來取得 JSON
API 說明
- :owner - 擁有者
- :repo - repos
- :path - 檔案名稱
參數說明: - ref - 指定分支,預設為 Master
所以 API 的連結是這樣https://api.github.com/repos/hsiangfeng/JSHomeWork/contents/JSON/datastore_search.json?ref=master
(因為檔案在 JSON 資料夾下,所以還需要加入一層 /JSON/
)
那我們就可以透過 AJAX 來取得遠端資料
1 | const url = 'https://api.github.com/repos/hsiangfeng/JSHomeWork/contents/JSON/datastore_search.json?ref=master'; |
這時候會看到一大段很恐怖的亂碼
而我們主要的資料都在 content
接下來我們要使用 Web 內建的 API 方法來做解碼,而編碼方式是使用 base64
,在這邊可以看到
依照 MDN 文件,我們可以使用 window.atob
來做 base64
解碼
1 | const url = 'https://api.github.com/repos/hsiangfeng/JSHomeWork/contents/JSON/datastore_search.json?ref=master'; |
這時候單對解碼其實還是會出現錯誤 DOMException: "String contains an invalid character"
這個原因是因為 base64
解碼過程少了一段處理方式,所以要再改成這樣
1 | const url = 'https://api.github.com/repos/hsiangfeng/JSHomeWork/contents/JSON/datastore_search.json?ref=master'; |
這時候就可以看到資料成功解析哩,這部分是因為拉回來的資料裡面有空白導致
由於這份資料還需要再做一次處理,所以其實程式碼還需要做調整,接下來為了確保資料已經有取得,所以會在後面加資料 return 給下一個做處理
1 | const url = 'https://api.github.com/repos/hsiangfeng/JSHomeWork/contents/JSON/datastore_search.json?ref=master'; |
那這樣子就可以看到資料正常哩~
補充
有時候可能會遇到解碼之後還是亂碼問題,這時候主要原因是出在解碼方是少了編碼方式,這時候只需要這樣撰寫即可
console.log(decodeURIComponent(escape(window.atob(data.content.replace(/\s/g, '')))));
decodeURIComponent MDN
escape MDN
但是要注意 escape
已經被棄用,所以並不推薦這種寫法,MDN 上也有提供新解法,但我嘗試後似乎會出現問題(?)等之後有空再來研究看看