TypeScript HTTP 请求工具|极客教程

TypeScript HTTP 请求工具

在前端开发中，经常需要与服务器进行数据交互，而HTTP请求就是其中最常见的一种方式。而对于TypeScript这种静态类型语言，我们可以借助一些工具来简化HTTP请求的处理，提高开发效率。本文将介绍如何使用TypeScript编写HTTP请求工具，来发送GET、POST等请求，并处理响应数据。

Axios

Axios 是一个基于 promise 的 HTTP 客户端，可用于浏览器和 Node.js。它具有以下特点：

简单易用
支持 Promise API
可以拦截请求和响应
自动转换 JSON 数据
可以取消请求

我们首先需要安装 Axios：

npm install axios

然后在 TypeScript 文件中引入并使用 Axios：

import axios from 'axios';

// 发送GET请求
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// 发送POST请求
axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

通过上面的代码，我们可以发送简单的GET和POST请求，并处理服务器响应的数据。

Fetch API

Fetch API 是浏览器提供的原生的HTTP请求方法，可以替代传统的XMLHttpRequest。Fetch API 有以下特点：

使用 Promise API
更加现代化的API设计
内置 JSON 转换
支持请求和响应的流

我们可以直接在 TypeScript 中使用 Fetch API：

// 发送GET请求
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

// 发送POST请求
fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
      title: 'foo',
      body: 'bar',
      userId: 1
    }),
    headers: {
      'Content-type': 'application/json; charset=UTF-8'
    }
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

通过 Fetch API，我们可以使用原生的方式发送HTTP请求，并得到服务器的响应数据。

封装 HTTP 工具类

为了让我们的代码更加清晰和模块化，我们可以封装一个 HTTP 工具类来处理 HTTP 请求。下面是一个简单的示例：

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

export default class HttpClient {
  public static async get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
    const response: AxiosResponse<T> = await axios.get(url, config);
    return response.data;
  }

  public static async post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
    const response: AxiosResponse<T> = await axios.post(url, data, config);
    return response.data;
  }
}

// 使用示例
(async () => {
  const postData = {
    title: 'foo',
    body: 'bar',
    userId: 1
  };

  const postResult = await HttpClient.post('https://jsonplaceholder.typicode.com/posts', postData);
  console.log(postResult);
})();

通过上面的代码，我们可以通过 HttpClient 类来发送和处理HTTP请求，使我们的代码更加模块化和可复用。