GitHub API contents file date 亂碼解決方法

前言

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

contents

以下範例將會使用我 repos 中的 JSON 來作範例 → 連結

首先依照 GitHub API content 文件 來取得 JSON

Image

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
2
3
4
5
6
7
8
9
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 解碼

1
2
3
4
5
6
7
8
9
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](https://i.imgur.com/t67YzgL.png

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

1
2
3
4
5
6
7
8
9
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 給下一個做處理

1
2
3
4
5
6
7
8
9
10
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

可以給點牡蠣。
Google AD