玩转 TypeScript 封装 Axios 基础版，助力网络请求开发

2023-03-13 20:08:30

打造强健的 HTTP 请求：用 TypeScript 封装 Axios

在现代 Web 开发中，发送 HTTP 请求是至关重要的。使用 Axios，这个强大的网络请求库，可以轻松地向服务器发送请求并接收响应。然而，为了使 Axios 的使用更加便捷和高效，我们可以利用 TypeScript 的强大功能来封装它。

1. 创建 Axios 实例

首先，让我们创建一个 Axios 实例，它将定义我们请求的默认设置。这包括基本 URL、超时值和其他配置选项。

const axios = require('axios');

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

2. 发送 GET 请求

获取资源是 HTTP 请求中最常见的类型之一。使用我们的 Axios 实例，我们可以轻松地发送 GET 请求。

const response = await instance.get('/users');

3. 发送 POST 请求

POST 请求用于向服务器提交新数据。使用我们的封装，我们可以轻松地发送 POST 请求并传递数据。

const data = {
  name: 'John Doe',
  email: 'johndoe@example.com',
};

const response = await instance.post('/users', data);

4. 处理响应

最后，我们需要处理响应。我们封装的 Axios 允许我们轻松地检查状态码和提取响应数据。

if (response.status === 200) {
  console.log(response.data);
} else {
  console.error(response.data);
}

完整示例

下面是一个完整示例，展示了如何使用 TypeScript 封装 Axios：

const axios = require('axios');

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

async function getUsers() {
  const response = await instance.get('/users');
  return response.data;
}

async function createUser(data) {
  const response = await instance.post('/users', data);
  return response.data;
}