Axios 封装：简化 API 请求的最佳实践

为了封装 Axios，我们可以创建一个新的文件，例如 api.js，然后在其中导入 Axios 并定义我们的请求函数。下面是一个简单的例子：

import axios from 'axios';

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

export const getProducts = async () => {
  const response = await api.get('/products');
  return response.data;
};

export const getProduct = async (id) => {
  const response = await api.get(`/products/${id}`);
  return response.data;
};

export const createProduct = async (product) => {
  const response = await api.post('/products', product);
  return response.data;
};

export const updateProduct = async (id, product) => {
  const response = await api.put(`/products/${id}`, product);
  return response.data;
};

export const deleteProduct = async (id) => {
  const response = await api.delete(`/products/${id}`);
  return response.data;
};

在这个例子中，我们创建了一个名为 api 的 Axios 实例，并且定义了五个请求函数：getProducts、getProduct、createProduct、updateProduct 和 deleteProduct。这些函数分别对应了获取所有产品、获取单个产品、创建产品、更新产品和删除产品的请求。这些函数都是异步的，因此我们使用了 async/await 来处理它们的结果。

通过这种方式，我们可以将所有与 API 交互的代码都封装在一个文件中，并且可以轻松地在应用程序的其他部分中使用它们。这不仅使我们的代码更清晰和可维护，而且还能够减少重复代码的数量。