数据结构
网络
关系数据库管理系统 (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: '[email protected]',
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: '[email protected]',
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: '[email protected]',
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+ 次浏览
