Fetch/XMLHttpRequest sa TypeScript

Ipinaliwanag ng artikulong ito ang Fetch/XMLHttpRequest sa TypeScript.

Maaari kang matuto kung paano gamitin ang Fetch API at XMLHttpRequest, pati na rin ang kanilang mga pagkakaiba.

YouTube Video

Fetch/XMLHttpRequest sa TypeScript

Sa TypeScript, ang mga HTTP request ay pangunahing ginagawa gamit ang dalawang API: Fetch API at XMLHttpRequest. Sa pamamagitan ng paggamit ng TypeScript, maaari mong ipakilala ang type checking para sa mga request at response kapag nagsasagawa ng asynchronous na komunikasyon gamit ang mga API na ito, na nagbibigay-daan sa iyong magsulat ng mas ligtas na code. Sa ibaba, ipakikilala namin kung paano gamitin ang bawat isa sa kanila.

Fetch API

Ang Fetch API ay isang API batay sa Promise na ginagamit upang gumawa ng asynchronous na komunikasyon (HTTP requests) nang simple. Sa TypeScript, maaari kang gumawa ng mga request gamit ang fetch na method at magproseso ng mga sagot sa isang type-safe na paraan.

Pangunahing Paggamit

Narito ang isang pangunahing halimbawa gamit ang isang GET na request.

 1const url = 'https://jsonplaceholder.typicode.com/posts';
 2
 3fetch(url)
 4    .then(response => {
 5        if (!response.ok) {
 6        throw new Error('Network response was not ok');
 7        }
 8        return response.json();  // Parse the response as JSON
 9    })
10    .then(data => {
11        console.log(data);
12    })
13    .catch(error => {
14        console.error('Fetch error:', error);
15    });

• Ang code na ito ay nagpapadala ng GET request sa tinukoy na URL, inaalis ang natanggap na tugon bilang JSON, at inilalabas ito sa console.

Type-safe na paghawak ng data sa TypeScript

Dahil ang tugon mula sa fetch na method ay may hindi malinaw na uri, maaari mong gamitin ang type checking ng TypeScript sa pamamagitan ng malinaw na pag-de-define ng uri ng tugon.

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9const url = 'https://jsonplaceholder.typicode.com/posts';
10
11fetch(url)
12    .then(response => response.json())
13    .then((data: Post[]) => {
14        data.forEach(post => {
15            console.log(`Title: ${post.title}`);
16        });
17    })
18    .catch(error => {
19        console.error('Error fetching data:', error);
20    });

• Inilalapat ng code na ito ang tipong Post sa data na nakuha gamit ang fetch, pinoproseso ang tugon nang ligtas sa tipo, at inilalabas ang pamagat ng bawat post sa console.

Halimbawa ng isang POST na request

Kapag nagpapadala ng data sa server, gamitin ang POST na method. Upang magpadala ng JSON sa body, tukuyin ang headers at body.

 1const postData = {
 2    title: 'foo',
 3    body: 'bar',
 4    userId: 1
 5};
 6
 7fetch('https://jsonplaceholder.typicode.com/posts', {
 8        method: 'POST',
 9        headers: {
10            'Content-Type': 'application/json'
11        },
12        body: JSON.stringify(postData)
13    })
14    .then(response => response.json())
15    .then(data => {
16        console.log('Created post:', data);
17    })
18    .catch(error => {
19        console.error('Error posting data:', error);
20    });

• Ang code na ito ay nagpapadala ng datos na nasa JSON format sa server gamit ang POST request, tinatanggap ang tugon bilang JSON, at inilalabas ito sa console.

Fetch gamit ang asynchronous na mga function (async/await)

Gamit ang async/await sa TypeScript, maaari kang magsulat ng asynchronous na mga proseso nang mas simple.

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9async function fetchPosts() {
10    try {
11        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
12        if (!response.ok) {
13            throw new Error('Network response was not ok');
14        }
15        const data: Post[] = await response.json();
16        console.log(data);
17    } catch (error) {
18        console.error('Fetch error:', error);
19    }
20}
21
22fetchPosts();

• Ang code na ito ay sabayang kumukuha ng datos ng post gamit ang sintaks na async/await, pinoproseso ang tugon bilang tipong Post[], at inilalabas ito sa console.

XMLHttpRequest

Ang XMLHttpRequest ay isang mas matandang API at medyo mas kumplikado kumpara sa Fetch API, ngunit maaaring gamitin ito kapag kinakailangan ang compatibility sa browser o mas advanced na kontrol.

Pangunahing paggamit ng XMLHttpRequest

Narito ang isang halimbawa gamit ang isang GET na request.

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onreadystatechange = function () {
 5    if (xhr.readyState === 4 && xhr.status === 200) {
 6        const data = JSON.parse(xhr.responseText);
 7        console.log(data);
 8    }
 9};
10
11xhr.send();

• Ang code na ito ay nagpapadala ng GET request sa tinukoy na URL gamit ang XMLHttpRequest, inaalis ang tugon bilang JSON, at inilalabas ito sa console.

Halimbawa ng isang POST na request

Kapag nagpapadala ng data sa server, tukuyin ang POST sa open na method at ipadala ang data gamit ang send.

 1const xhr = new XMLHttpRequest();
 2xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
 3xhr.setRequestHeader('Content-Type', 'application/json');
 4
 5const postData = JSON.stringify({
 6    title: 'foo',
 7    body: 'bar',
 8    userId: 1
 9});
10
11xhr.onreadystatechange = function () {
12    if (xhr.readyState === 4 && xhr.status === 201) {
13        console.log('Created post:', xhr.responseText);
14    }
15};
16
17xhr.send(postData);

• Ang code na ito ay nagpapadala ng datos na nasa JSON format sa server gamit ang POST request sa pamamagitan ng XMLHttpRequest, at inilalabas ang tugon na naglalaman ng nalikhang data sa console.

Paghawak ng error gamit ang XMLHttpRequest

Maaari mong hawakan ang mga error sa request gamit ang onerror na event.

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onerror = function () {
 5    console.error('Request failed');
 6};
 7
 8xhr.onload = function () {
 9    if (xhr.status === 200) {
10        console.log('Response:', xhr.responseText);
11    } else {
12        console.error('Error:', xhr.status);
13    }
14};
15
16xhr.send();

• Ang code na ito ay nagsasagawa ng GET request gamit ang XMLHttpRequest, hinahawakan ang mga error sa request gamit ang onerror, at maayos na nagla-log ng tugon sa parehong tagumpay at kabiguan.

Paghahambing ng Fetch API at XMLHttpRequest

Buod

Sa TypeScript, maaari kang sumulat ng maigsi at ligtas sa uri na asynchronous na mga request gamit ang Fetch API. Sa kabilang banda, ang XMLHttpRequest ay isang mas luma na API ngunit maaaring magamit pa rin sa ilang mga sitwasyon. Karaniwan, inirerekomenda na gamitin ang simple at modernong Fetch API, ngunit kung kinakailangan ang pagkakatugma sa browser o pagsubaybay ng progreso, maaaring isaalang-alang din ang XMLHttpRequest.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video