Vue中Axios的封装与API接口管理的艺术

2023-09-25 21:48:59

一、Axios的封装

在Vue项目中，我们通常使用Axios库来与后端API交互。Axios是一个基于Promise的HTTP库，它可以在浏览器端和Node.js中运行。Axios有很多优秀的特性，例如：

简单易用：Axios的API非常简单易用，即使是新手也可以快速上手。
强大的功能：Axios提供了很多强大的功能，例如拦截请求和响应、超时设置、重试机制等。
跨平台支持：Axios可以在浏览器端和Node.js中运行，这使得它非常适合用于构建全栈应用程序。

为了提高开发效率，我们可以将Axios进行封装，创建一个自己的Axios实例。这样，我们就可以在项目中直接使用这个封装好的Axios实例，而无需每次都重复创建。

import axios from 'axios';

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

在上面的代码中，我们创建了一个Axios实例，并设置了baseURL和timeout。这样，我们就可以在项目中直接使用这个封装好的Axios实例来发送请求。

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

二、API接口管理

在大型项目中，通常会有大量的API接口。为了便于管理，我们可以将这些API接口进行分类，并创建相应的接口文件。

// api/user.js
export const getUser = (id) => {
  return instance.get(`/users/${id}`);
};

export const createUser = (data) => {
  return instance.post('/users', data);
};

export const updateUser = (id, data) => {
  return instance.put(`/users/${id}`, data);
};

export const deleteUser = (id) => {
  return instance.delete(`/users/${id}`);
};