Spring Boot 中的 http 请求 - TypeScript

在使用 Spring Boot 进行 web 开发时，处理 HTTP 请求是非常常见的任务之一。本文将介绍如何在 TypeScript 中发起和处理 HTTP 请求。

发起 GET 请求

使用 axios 发起 GET 请求

在 TypeScript 中，可以使用 axios 库来发送 HTTP 请求。首先需要安装 axios：

npm install axios

然后在代码中导入 axios：

import axios from 'axios';

使用 axios 发起一个 GET 请求的示例代码如下：

axios.get('http://example.com/api/users')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.error(error);
  });

使用 fetch 发起 GET 请求

除了 axios，还可以使用内置的 fetch 函数来发送 GET 请求。示例代码如下：

fetch('http://example.com/api/users')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) {
    console.error(error);
  });

发起 POST 请求

使用 axios 发起 POST 请求

使用 axios 发起一个 POST 请求的示例代码如下：

axios.post('http://example.com/api/users', { name: 'John', age: 30 })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.error(error);
  });

使用 fetch 发起 POST 请求

使用 fetch 发起一个 POST 请求的示例代码如下：

fetch('http://example.com/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'John', age: 30 }),
})
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) {
    console.error(error);
  });

发起其他类型的请求

除了 GET 和 POST 请求，还可以发起其他类型的请求，例如 PUT、DELETE 等。使用 axios 发起其他类型请求的示例代码如下：

axios.put('http://example.com/api/users/1', { name: 'John', age: 40 })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.error(error);
  });

使用 fetch 发起 DELETE 请求的示例代码如下：

fetch('http://example.com/api/users/1', {
  method: 'DELETE',
})
  .then(function (response) {
    console.log(response.statusText);
  })
  .catch(function (error) {
    console.error(error);
  });

总结

以上便是在 TypeScript 中发起和处理 HTTP 请求的示例代码。无论使用 axios 还是 fetch，都可以方便地发起各种类型的请求，并获取响应数据。希望本文对你在 Spring Boot 中处理 HTTP 请求有所帮助。

请注意以上示例代码仅供参考，实际使用中可能需要根据具体情况进行适当调整。