Vue3+TS 中台项目请求封装揭秘：精通 Axios

踏上 Vue3+TS 中台项目之旅：Axios 请求封装的奥秘

揭开封装之谜

在 Vue3+TS 中台项目中，Axios 是我们进行数据交互的利器。为了简化请求过程，我们可以对 Axios 进行封装，让代码更简洁、易读、可维护和可扩展。下面就让我们一起揭开 Axios 请求封装的奥秘。

1. 导入 Axios 库

首先，我们在项目中导入 Axios 库：

import axios from 'axios';

2. 创建 Axios 实例

创建一个 Axios 实例，它是我们进行请求的根源：

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

3. 配置 Axios 实例

我们可以根据需要对 Axios 实例进行配置，比如设置 baseURL 和超时时间：

instance.defaults.baseURL = 'https://example.com/api';
instance.defaults.timeout = 10000;

4. 封装 Axios 方法

封装 Axios 方法，如 GET、POST、PUT、DELETE 等，简化请求过程：

const get = (url, params) => {
  return instance.get(url, { params });
};

const post = (url, data) => {
  return instance.post(url, data);
};

5. 使用封装的 Axios 方法

在组件中，使用这些封装好的 Axios 方法进行数据请求：

get('/users', { name: 'John' }).then((response) => {
  console.log(response.data);
});

post('/users', { name: 'John', age: 30 }).then((response) => {
  console.log(response.data);
});

Axios 请求封装的优点

• 代码简洁： 封装后的 Axios 方法让代码更简洁，易于阅读。
• 可维护性强： 只需修改封装的方法即可修改请求逻辑，维护性强。
• 可扩展性强： 添加新的请求时，只需添加新的封装方法即可，可扩展性强。
• 更少的错误： 封装的方法减少了错误，只需记住封装的方法即可。

Axios 请求封装实战案例

// 导入 Axios 库
import axios from 'axios';

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

// 封装 Axios GET 方法
const get = (url, params) => {
  return instance.get(url, { params });
};

// 封装 Axios POST 方法
const post = (url, data) => {
  return instance.post(url, data);
};

// 使用封装的 Axios GET 方法
get('/users', { name: 'John' }).then((response) => {
  console.log(response.data);
});

// 使用封装的 Axios POST 方法
post('/users', { name: 'John', age: 30 }).then((response) => {
  console.log(response.data);
});

常见问题解答

1. 为什么需要封装 Axios？
   为了简化请求过程，让代码更简洁、易读、可维护和可扩展。

2. 如何配置 Axios 实例？
   通过 instance.defaults 设置 baseURL、超时时间等配置。

3. 封装了哪些 Axios 方法？
   通常封装 GET、POST、PUT、DELETE 等常用方法。

4. 封装后的 Axios 方法如何使用？
   在组件中直接使用封装好的方法，如 get('/users', { name: 'John' })。

5. Axios 请求封装有哪些优点？
   代码简洁、可维护性强、可扩展性强、更少错误。