在 Vue 3.2 和 TypeScript 的开发过程中，使用 Axios 可以方便地完成网络请求和响应的操作。 在实际的应用程序中，我们需要对请求和响应进行统一的封装和处理。这篇文章将介绍如何使用 Axios 完成请求和响应拦截器的封装。

首先，我们需要安装 Axios。我们可以使用以下命令在我们的项目中安装它：

npm install axios

接下来，我们需要在项目中创建一个 http.ts 文件。然后，我们可以使用以下代码来创建一个 Axios 实例。

请求和响应的拦截：

import axios from 'axios'
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})
service.interceptors.request.use(
  config => {
    // 在请求发送之前做些什么
    return config
  },
  error => {
    // 处理请求错误
    console.log(error)
    return Promise.reject(error)
  }
)
// 响应拦截器
service.interceptors.response.use(
  res => {
    return res
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

export default service

在这里，我们首先使用 Axios 的 create() 方法创建了一个 Axios 实例，并将其作为默认导出。我们还设置了一个默认的 API 基础 URL。然后，我们使用 interceptors.request.use() 和 interceptors.response.use() 方法来分别定义请求和响应的拦截器。

在请求拦截器中，我们可以对请求的特定内容进行操作，例如添加身份验证信息。在响应拦截器中，我们可以对响应数据进行转换和异常处理。如果出现错误，我们可以按照特定的逻辑进行处理，例如控制台输出有关失败服务器的信息。

在这个示例中，我们根据 Axios 的请求和响应的拦截器，为我们的应用程序提供了一个通用的封装。在每个 API 调用中，我们都将使用相同的 Axios 实例及其拦截器。这确保了我们的所有 API 请求都得到了统一的处理。

总结：

在 Vue 3.2 和 TypeScript 中使用 Axios 可以轻松地完成网路请求和响应的操作。通过这个示例，我们可以学会如何对请求和响应进行拦截并进行统一的处理，以便于应用程序的使用和管理。