資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
Microsoft Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
服裝研究
法律研究如何在 TypeScript 中呼叫 API？
在本教程中，我們將學習如何使用 TypeScript 呼叫 API。TypeScript 是 JavaScript 的靜態型別超集，它為該語言添加了型別檢查功能。它提供了增強的工具，並有助於在開發過程中捕獲錯誤。
在使用 API 時，我們通常需要發出 HTTP 請求來發送資料和檢索資訊。TypeScript 允許我們在與 API 互動時編寫簡潔有序的程式碼，從而更輕鬆地處理響應和處理返回的資料。
在本教程中，我們將探討 TypeScript 中用於進行 API 呼叫的不同方法和庫。我們將重點介紹 axios 庫的使用，該庫廣泛使用，併為進行 HTTP 請求提供了簡單直觀的介面。
語法
使用者可以按照以下語法使用 TypeScript 建立 API 呼叫：
import axios from 'axios';
async function fetchData() {
try {
const response = await axios.get(apiUrl);
// Handle the response
} catch (error) {
// Handle the error
}
}
上述語法演示了使用 axios 庫進行 API 呼叫的基本結構。我們匯入 axios 模組，定義一個名為 fetchData() 的非同步函式，並使用 axios.get() 方法向指定的 API 端點 (apiUrl) 傳送 GET 請求。可以在 try 塊中處理響應，並且可以在 catch 塊中捕獲任何錯誤。
在 TypeScript 中進行 API 呼叫的不同庫
在 TypeScript 中進行 API 呼叫時，可以使用多個 HTTP 庫，每個庫都提供獨特的特性和選項。以下是一些常用的庫：
axios - Axios 是一個流行的 HTTP 客戶端庫，支援瀏覽器和 Node.js 環境。它提供了一個簡單直觀的 API 用於進行 HTTP 請求、處理標頭、設定請求引數和管理響應。Axios 還支援諸如請求取消、攔截器和自動 JSON 解析之類的功能。
node-fetch - Node-fetch 是一個輕量級庫，它將 fetch API 帶到 Node.js。它允許您使用與瀏覽器中 fetch API 相同的語法和概念發出 HTTP 請求。Node-fetch 支援設定標頭、處理 Cookie 和使用流等功能。
isomorphic-fetch - Isomorphic-fetch 是一個跨平臺庫，它為在瀏覽器和 Node.js 環境中進行 HTTP 請求提供類似 fetch 的 API。它旨在提供跨不同平臺的一致行為，並支援請求和響應轉換、處理 Cookie 和設定標頭等功能。
這些庫抽象了發出 HTTP 請求的複雜性，並提供了方便的方法來處理 API 互動。使用者可以選擇最符合其專案需求和偏好的庫。
示例 1
在這個示例中，我們建立了一個名為 fetchUsers() 的函式，該函式使用 Axios 向 'https://jsonplaceholder.typicode.com/users' 端點發出 GET 請求。
收到響應後，我們從 response.data 屬性中提取使用者資料。
最後，我們使用 console.log() 將使用者列表記錄到控制檯。執行此指令碼時，使用者可以在輸出中觀察使用者列表。
import axios from 'axios';
async function fetchUsers() {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
const users = response.data;
console.log('List of users:');
console.log(users);
} catch (error) {
console.error('Error fetching users:', error.message);
}
}
fetchUsers();
輸出
List of users:
[
{
id: 1,
name: 'Leanne Graham',
username: 'Bret',
email: 'Sincere@april.biz',
address: {
street: 'Kulas Light',
suite: 'Apt. 556',
city: 'Gwenborough',
zipcode: '92998-3874',
geo: [Object]
},
phone: '1-770-736-8031 x56442',
website: 'hildegard.org',
company: {
name: 'Romaguera-Crona',
catchPhrase: 'Multi-layered client-server neural-net',
bs: 'harness real-time e-markets'
}
},{
id: 2,
name: 'Ervin Howell',
username: 'Antonette',
email: 'Shanna@melissa.tv',
address: {
street: 'Victor Plains',
suite: 'Suite 879',
city: 'Wisokyburgh',
zipcode: '90566-7771',
geo: [Object]
},
phone: '010-692-6593 x09125',
website: 'anastasia.net',
company: {
name: 'Deckow-Crist',
catchPhrase: 'Proactive didactic contingency',
bs: 'synergize scalable supply-chains'
}
},
]
示例 2
在這個示例中，我們匯入 node-fetch 庫並定義一個名為 fetchUserDetails() 的非同步函式。此函式使用 fetch() 向 'https://reqres.in/api/users/1' 端點發出 GET 請求，該端點檢索 ID 為 1 的使用者的詳細資訊。
收到響應後，我們使用 response.json() 將響應正文解析為 JSON 並獲取使用者資料。
最後，我們使用 console.log() 將使用者詳細資訊記錄到控制檯。執行此指令碼時，使用者可以在輸出中觀察使用者詳細資訊。
import fetch from 'node-fetch';
async function fetchUserDetails() {
try {
const response = await fetch('https://reqres.in/api/users/1');
const data = await response.json();
console.log('User details:');
console.log(data);
} catch (error) {
console.error('Error fetching user details:', error.message);
}
}
fetchUserDetails();
輸出
User details:{
data: {
id: 1,
email: 'george.bluth@reqres.in',
first_name: 'George',
last_name: 'Bluth',
avatar: 'https://reqres.in/img/faces/1-image.jpg'
},
support: {
url: 'https://reqres.in/#support-heading',
text: 'To keep ReqRes free, contributions towards server costs are appreciated!'
}
}
示例 3
在這個示例中，我們將 Chuck Norris API 端點 URL 定義為 chuckNorrisUrl。
我們建立了一個名為 fetchRandomJoke() 的非同步函式，該函式使用 Fetch API 向 Chuck Norris API 傳送 GET 請求。
收到響應後，我們使用 response.json() 解析 JSON 資料。笑話是從響應資料的 value 屬性中提取的。
最後，我們呼叫 fetchRandomJoke() 來啟動 API 呼叫並在網頁上顯示隨機的 Chuck Norris 笑話。
使用者可以在輸出中觀察當天的笑話。
import fetch from 'isomorphic-fetch';
const chuckNorrisUrl = 'https://api.chucknorris.io/jokes/random';
async function fetchRandomJoke() {
try {
const response = await fetch(chuckNorrisUrl);
const data = await response.json();
const joke = data.value;
console.log("Joke of the day: ", joke);
} catch (error) {
console.error('Error fetching joke:', error.message);
}
}
fetchRandomJoke();
輸出
Joke of the day: Chuck Norris can skeletonize a cow in under two minutes.
在本教程中，我們學習瞭如何使用 TypeScript 呼叫 API。我們探討了使用 axios 庫進行 API 呼叫和處理響應的語法。此外，我們還看到了一些使用 node-fetch 和 isomorphic-fetch 庫從 API 檢索使用者資料的示例。透過理解這些概念，使用者現在可以將 API 呼叫整合到他們的 TypeScript 專案中，並有效地從外部來源獲取資料。
6000+ 次瀏覽
