API, HTTP & fetch

API = กลไกให้ซอฟต์แวร์สองส่วนสื่อสารกันด้วยชุดคำจำกัดความและโปรโตคอล ส่วน Web API สื่อสารผ่าน HTTP เป็นหลัก

API คืออะไร

Client  --- request: x=1, y=2 --->  Server
                                    API service: บวก x + y
Client  <-- response: 3 ----------  Server

• บริการ API ปกติอยู่ฝั่ง server (back-end development)
• Client เป็นผู้ร้องขอบริการ
• ต้องมี protocol มาตรฐานเป็นข้อตกลงร่วมกัน

HTTP 1.0 / 1.1 / 2.0

Header กับ Body

HTTP Method

Status Code ที่ควรรู้

fetch

ดีกว่า XMLHttpRequest ตรงที่รองรับ Promise และ async/await ได้เลย

// แบบ .then()
fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())     // แปลงเป็น JSON
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

// แบบ async/await
async function getText(file) {
    let x = await fetch(file);
    let y = await x.text();
    myDisplay(y);
}

// ส่งแบบ POST พร้อม header และ body
fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(postData)
});

// ใช้ Request object แล้วระบุ method DELETE
const request = new Request('https://xxx.firebaseio.com/locations.json', { method: 'DELETE' });
const response = await fetch(request);
return await response.json();

fetch ดึงเอกสาร HTML มาแปลงเป็น DOM ก็ได้:

fetch('https://jsonplaceholder.typicode.com', {
    mode: 'cors',
    headers: { 'Access-Control-Allow-Origin': '*' }
})
    .then(response => response.text())
    .then(text => {
        var parser = new DOMParser();
        var html = parser.parseFromString(text, "text/html");
        console.log(html);
    });

axios

npm install axios

const axios = require('axios');
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
const data = response.data;      // ไม่ต้องเรียก .json() เอง

อัปโหลดไฟล์ & base64

function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    if (!file) { console.error('No file selected'); return; }

    const formData = new FormData();
    formData.append('file', file);

    fetch('/upload/', { method: 'POST', body: formData })
        .then(response => response.json())
        .then(data => console.log('Success:', data))
        .catch(error => console.error('Error:', error));
}

ไฟล์ใหญ่แบ่งส่งเป็นส่วน ๆ ได้ด้วยการแปลงเป็น base64 string:

const reader = new FileReader();
reader.onload = function(event) {
    const base64String = event.target.result.split(',')[1];
    document.getElementById('result').textContent = base64String;
};
reader.readAsDataURL(file);

SOAP / REST / GraphQL

โครงของ GraphQL คือ schema ที่ประกอบด้วย Type และ Field:

const UserType = new GraphQLObjectType({
    name: 'User',
    fields: () => ({
        id:   { type: GraphQLString },
        name: { type: GraphQLString },
        age:  { type: GraphQLInt }
    })
});

REST CRUD