GitHub API contents file date 亂碼解決方法

發表於 2019-06-18 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

這幾天在使用 GitHub API 中的一個 API 方法發現 content 會出現亂碼問題，這邊紀錄一下該如何解決 content 亂碼

前言

這幾天在使用 GitHub API 中的一個 API 方法發現 content 會出現亂碼問題，這邊紀錄一下該如何解決 content 亂碼

以下範例將會使用我 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 來取得遠端資料

const url = 'https://api.github.com/repos/hsiangfeng/JSHomeWork/contents/JSON/datastore_search.json?ref=master';

fetch(url).then((respons) => {
  return respons.json();
}).then((data) => {
  console.log(data)
}).catch((error) => {
  console.log(error);
});

這時候會看到一大段很恐怖的亂碼

而我們主要的資料都在 content

content

接下來我們要使用 Web 內建的 API 方法來做解碼，而編碼方式是使用 base64，在這邊可以看到

base64

依照 MDN 文件，我們可以使用 window.atob 來做 base64 解碼

const url = 'https://api.github.com/repos/hsiangfeng/JSHomeWork/contents/JSON/datastore_search.json?ref=master';

fetch(url).then((respons) => {
  return respons.json();
}).then((data) => {
  console.log(window.atob(data));
}).catch((error) => {
  console.log(error);
});

這時候單對解碼其實還是會出現錯誤 DOMException: "String contains an invalid character"

DOMException

這個原因是因為 base64 解碼過程少了一段處理方式，所以要再改成這樣

const url = 'https://api.github.com/repos/hsiangfeng/JSHomeWork/contents/JSON/datastore_search.json?ref=master';

fetch(url).then((respons) => {
  return respons.json();
}).then((data) => {
  console.log(window.atob(data.content.replace(/\s/g, '')));
}).catch((error) => {
  console.log(error);
});

這時候就可以看到資料成功解析哩，這部分是因為拉回來的資料裡面有空白導致

成功解析

由於這份資料還需要再做一次處理，所以其實程式碼還需要做調整，接下來為了確保資料已經有取得，所以會在後面加資料 return 給下一個做處理

const url = 'https://api.github.com/repos/hsiangfeng/JSHomeWork/contents/JSON/datastore_search.json?ref=master';
fetch(url).then((respons) => {
  return respons.json();
}).then((data) => {
  return window.atob(data.content.replace(/\s/g, ''));
}).then((data) => {
  console.log(JSON.parse(data));
}).catch((error) => {
  console.log(error);
});

那這樣子就可以看到資料正常哩~

補充

有時候可能會遇到解碼之後還是亂碼問題，這時候主要原因是出在解碼方是少了編碼方式，這時候只需要這樣撰寫即可

console.log(decodeURIComponent(escape(window.atob(data.content.replace(/\s/g, '')))));

decodeURIComponent MDN
escape MDN

但是要注意 escape 已經被棄用，所以並不推薦這種寫法，MDN 上也有提供新解法，但我嘗試後似乎會出現問題(?)等之後有空再來研究看看

encodeURIComponent