TypeScript发送HTTP请求|极客教程

TypeScript发送HTTP请求

在Web开发中，发送HTTP请求是非常常见的操作，用于从服务器获取数据或者向服务器发送数据。而在TypeScript中，我们通常使用fetchAPI或者第三方库如axios来发送HTTP请求。

本文将详细介绍如何在TypeScript中发送HTTP请求，并给出示例代码。

使用fetch API发送GET请求

fetch是浏览器提供的一种用于发送网络请求的API，它能够以Promise的方式返回响应结果。下面是一个简单的示例代码，用于发送GET请求并处理响应数据：

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

上面的代码中，我们向https://jsonplaceholder.typicode.com/posts发送了一个GET请求，并在Promise链中处理了响应数据。我们首先调用response.json()方法将响应数据解析为JSON格式，然后在第二个then方法中处理JSON格式的数据，最后在catch方法中处理错误。

使用fetch API发送POST请求

除了发送GET请求外，我们还经常需要发送POST请求来向服务器提交数据。下面是一个简单的示例代码，用于发送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:', error));

上面的代码中，我们向https://jsonplaceholder.typicode.com/posts发送了一个POST请求，并在请求中提交了一个JSON格式的数据。我们通过method: 'POST'指定了请求方法为POST，通过body选项提交了JSON格式的数据，通过headers选项指定了请求头中的Content-Type为application/json; charset=UTF-8。

使用axios发送HTTP请求

除了fetch API外，我们还可以使用第三方库axios来发送HTTP请求。axios封装了fetch API，提供了更加简洁和易用的接口。

首先，我们需要安装axios库：

npm install axios

然后，我们可以使用axios来发送HTTP请求。下面是一个使用axios发送GET请求的示例代码：

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

上面的代码中，我们使用axios.get方法发送了一个GET请求，并通过Promise链处理了响应数据。

添加请求头和请求参数

有时候我们需要在请求中添加一些请求头或者请求参数。下面是一个使用axios发送带有请求头和请求参数的请求的示例代码：

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts', {
  headers: {
    'Authorization': 'Bearer token'
  },
  params: {
    userId: 1
  }
})
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

上面的代码中，我们通过headers选项添加了一个Authorization的请求头，通过params选项添加了一个userId的请求参数。