React 配合 TypeScript 发起请求的指南

2023-12-13 22:12:25

前言

在 React 应用中，经常需要与后端服务器进行交互，以获取或发送数据。为了简化这一过程，我们可以使用第三方库，例如 Axios。Axios 是一个基于 Promise 的 HTTP 客户端，可以轻松地发送各种类型的 HTTP 请求。

在 TypeScript 中，我们可以通过类型注解来指定请求的类型、参数和返回类型。这可以帮助我们更好地理解代码，并避免在编译时出现类型错误。

安装和配置

要开始使用 Axios，首先需要将其安装到你的项目中。你可以使用 npm 或 yarn 包管理器来安装 Axios：

npm install axios

或

yarn add axios

安装完成后，就可以在你的 React 应用中导入 Axios：

import axios from 'axios';

接下来，我们需要配置 Axios。我们可以通过创建一个 Axios 实例来配置一些默认值，例如超时时间、请求头和代理设置。

const axiosInstance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

这样，我们就可以使用这个 Axios 实例来发送请求了。

发起请求

要发起请求，我们可以使用 Axios 实例的 get()、post()、put()、delete() 等方法。这些方法接受两个参数：请求的 URL 和请求数据。

axiosInstance.get('/users').then((response) => {
  console.log(response.data);
});

axiosInstance.post('/users', { name: 'John Doe', email: 'johndoe@example.com' }).then((response) => {
  console.log(response.data);
});

axiosInstance.put('/users/1', { name: 'John Doe', email: 'johndoe@example.com' }).then((response) => {
  console.log(response.data);
});

axiosInstance.delete('/users/1').then((response) => {
  console.log(response.data);
});

在上面的代码中，我们分别发起了 GET、POST、PUT 和 DELETE 请求。我们可以使用 then() 方法来处理请求的响应。如果请求成功，then() 方法的第一个参数将包含响应数据。如果请求失败，then() 方法的第二个参数将包含错误信息。

异步编程

在 React 中，我们可以使用 async/await 语法来处理异步操作，包括发送请求。

const users = await axiosInstance.get('/users');

console.log(users.data);

在上面的代码中，我们使用 await 来等待 axiosInstance.get('/users') 请求完成。这样，我们就可以在 console.log(users.data) 这行代码中直接使用请求的响应数据。

最佳实践

在使用 Axios 发起请求时，有一些最佳实践可以帮助我们编写出更健壮、更易维护的代码。

使用 try/catch 语句来处理错误。
使用超时来防止请求无限期地等待。
使用重试机制来处理临时性的请求失败。
在发送请求之前，对请求数据进行验证。
使用拦截器来处理请求和响应。

常见问题

在使用 Axios 发起请求时，可能会遇到一些常见问题。

请求失败，错误信息为 401 Unauthorized

这可能是因为你没有在请求头中提供正确的授权信息。你可以使用 axiosInstance.defaults.headers.common['Authorization'] = 'Bearer ' + token 来设置授权信息。
请求失败，错误信息为 403 Forbidden

这可能是因为你没有权限访问请求的资源。你可以检查一下你的权限设置。
请求失败，错误信息为 404 Not Found

这可能是因为你请求的资源不存在。你可以检查一下你的请求 URL 是否正确。