Vue项目中axios的二次封装

Vue 项目中 axios 的二次封装

Vue 项目使用过程中一般会对 axios 进行二次封装, 以期在合适的时机处理一些全局的需求, 比如常见的 请求拦截器 和 响应拦截器. 接下来简单聊聊具体的操作步骤.

1, 下载 axios 模块

执行以下指令:

bash 复制代码
import axios from 'axios';

2, 封装

在 src 文件夹下创建 api 文件夹, 并创建 index.js、axios.js 和 users.js 文件.

index.js 文件的作用的将当前项目中所有的 api 文件统一导入并导出, 这样将来在使用时, 外界直接直接 import 这个 api 的 index.js 文件就行, 即使后期有位置上的变化, 也不用在每个 api 的引入文件中修改, 方便管理和维护.

axios.js 文件的目的就是 axios 的二次封装.

users.js 文件中仅封装了与 /users 相关的 api.

后期还可以根据需求创建更多的 xxx.js 文件来做 api 的封装管理.

3, axios.js 文件

接下来聊聊关于 axios 的二次封装, 废话不多说, 直接上代码

javascript 复制代码
import axios from 'axios';

// 基本配置
const instance = axios.create({
  baseURL: 'http://localhost:3000/', // 根据实际情况修改API地址
  timeout: 5000 // 设置超时时间,单位为ms
});

// 请求拦截器
instance.interceptors.request.use(config => {
  config.headers['Authorization'] = localStorage.getItem('token'); // 设置请求头部分,这里举例使用了localStorage存储的token作为身份标识
  return config;
}, error => {
  console.log(error);
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(response => {
  const data = response.data;
  if (data && data.code !== 200) { // 根据接口返回的状态码判断是否有错误
      alert(`Error code ${data.code}: ${data.message}`); // 自定义错误提示
      return Promise.reject(new Error(data.message));
  } else {
      return data;
  }
}, error => {
  console.log(error);
  return Promise.reject(error);
});

export default instance;

4, users.js 文件

示例代码如下:

javascript 复制代码
import axios from "./axios";

const users = {
  getUser: (params) => {
    return axios.get(`/users`, { params });
  },
}

export default users;

5, index.js 文件

示例代码如下:

javascript 复制代码
import users from "./users";

export default {
  ...users,
}

接下来就可以在具体的 .vue 文件中导入 api 来调用了.

本章完!

相关推荐
昔人'10 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静15 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者16 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~16 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge16 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再17 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴17 小时前
Lua 模块的完整入门指南
前端·lua
Sheldon一蓑烟雨任平生17 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
浪里行舟18 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@12318 小时前
CSS易忘属性
前端·css