在接觸JavaScript的API串接之前，我就接觸過python爬蟲用API抓資料的方式，但對於JavaScript的串接方式實在混亂，而且是很多職缺現在必備能力，所以我想整理一下目前知道的方法，方便之後閱讀使用
內容目錄
什麼是API
這時候看到萬能的維基百科定義為：
應用程式介面是指電腦作業系統或程式函式庫提供給應用程式呼叫使用的程式碼，其主要目的是讓應用程式開發人員得以呼叫一組常式功能，而無須考慮其底層的原始碼為何、或理解其內部工作機制的細節。API本身是抽象的，它僅定義了一個介面，而不涉及應用程式在實作過程中的具體操作。
看完之後還是一頭霧水，有一種每個字都看得懂，然後連在一起就不知道在講什麼
簡單來說，就是當我們需要某一個應用程式功能，不需要自己開發或了解他原本全部的程式碼，只需要了解怎麼使用他，呼叫他就好。很像你想要裝一台冷氣在家，不需要知道冷氣零件如何製作、如何組裝、如何運作跟原理，只要知道把冷氣如何安裝在家裡、如何打開冷氣、冷氣有什麼作用就好
如何串接API
直接用一個網站舉例去串接比較好理解，今天要串接的網站是jsonplaceholder，這個是一個假的API服務端，就是給你練習用的，裡面的要求都相對簡單，先從簡單的去了解怎麼運作我們的程式碼
首先看官方文件
取得資源
在這裡就是點開Guide，會說他用的是Fetch API的範例
他這這裡直接貼一個範例，要獲取他的內容，就照這個格式的寫法貼上去，就會獲得output下面內容
那有時候他們就是只給範例，不給說明，從這範例可以看到，他的取的網址就是https://jsonplaceholder.typicode.com/posts，則後面的/1是第一篇文章
那實際上取得資料就像下圖一樣，有完整的文章內容、文章標題
創造新資源
當然這個實際上不會被創造，只會偽造新的，畢竟這個資料庫不是我們的
在這裡提到的方式就是加入post的回傳方式，依照他的格式就是給他文章標題、文章內容、useId
headers的Content-type是回傳給對方的資料格式，這就不動他
更新資源內容
這裡跟創造新文章差不多，差別在method的地方改成，PUT，指定ID要更改的文章，剩下一樣要更改文章標題、內容、useId
刪除文章
這裡不同的地方，就是將文章ID直接指定某一篇文章，然後method直接改成刪除即可
使用fetch串接
接下來取得這些資料之後，就是要做切版，讓他可以直接顯示在我們的網頁上面
我們先把取得的文章1做簡單得整理並且呈現在網頁上，這裡先取得div位置，並且使用innerHTML將文章內容的標題、內容、ID放置在我們需要的位置
<div id="post" class="post">
<!-- <p>第X篇文章</p>
<p> 標題是：</p>
<p>文章內容：</p> -->
</div>
<script>
var post = document.querySelector("#post");
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => response.json())
.then((json) => {
post.innerHTML = `
<p>第 ${json.id}篇文章</p>
<p> 標題是： ${json.title}</p>
<p>文章內容： ${json.body}</p>
`;
});
</script>
呈現結果：
加入一些功能
取得前10篇文章
這裡用到的方式跟剛剛差不多，先取得全部文章，使用slice取得前10篇文章存到allpost裡面，再將allpost裡面的東西用迴圈印出來
<div id="post" class="post">
<!-- <p>第X篇文章</p>
<p> 標題是：</p>
<p>文章內容：</p> -->
</div>
<script>
var post = document.querySelector("#post");
var allpost = [];
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((json) => {
allpost = json.slice(0, 10);
post.innerHTML = "";
allpost.forEach((element) => {
post.innerHTML =
post.innerHTML +
`
<p>第 ${element.id}篇文章</p>
<p> 標題是： ${element.title}</p>
<p>文章內容： ${element.body}</p>
`;
});
});
</script>
傳統XMLHttpRequest寫法
同樣取得前10篇文章，使用XMLHttpRequest的寫法，也是能取得相同的結果
<div id="post" class="post">
<!-- <p>第X篇文章</p>
<p> 標題是：</p>
<p>文章內容：</p> -->
</div>
<script>
var post = document.querySelector("#post");
var allpost = [];
let xhr = new XMLHttpRequest();
let url = "https://jsonplaceholder.typicode.com/posts";
xhr.open("GET", url, true);
xhr.onload = function () {
if (this.status >= 200 && this.status < 400) {
let response = JSON.parse(this.response);
allpost = response.slice(0, 10);
allpost.forEach((element) => {
post.innerHTML =
post.innerHTML +
`
<p>第 ${element.id}篇文章</p>
<p> 標題是： ${element.title}</p>
<p>文章內容： ${element.body}</p>
`;
});
}
};
xhr.onerror = function () {};
xhr.send();
</script>
結論：
這次的目標是要了解fetch跟XMLHttpRequest的用法，fetch寫法簡單也提供很多新的功能，XMLHttpRequest是比較早期出現，使用的人也不少，所以為了看懂這兩種都有人寫的程式碼，我會再多練習串接更多API編寫