GitHub API contents file date 亂碼解決方法

前言

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

以下範例將會使用我 repos 中的 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

接下來我們要使用 Web 內建的 API 方法來做解碼，而編碼方式是使用 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"

這個原因是因為 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);
});