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支持设置头部、处理cookies和处理流等功能。

isomorphic-fetch − isomorphic-fetch是一个跨平台库，为在浏览器和Node.js环境中进行HTTP请求提供了类似于fetch的API。它旨在在不同平台上提供一致的行为，并支持请求和响应转换、处理cookies和设置头部等功能。

这些库抽象了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()发起一个GET请求到’https://reqres.in/api/users/1’端点，该端点会获取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发送一个GET请求到Chuck Norris的API。

在接收到响应后，我们使用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项目中，并高效地从外部源获取数据。