axios封装—vue3项目

目录

• • • 前言
    • 正文
    • • 安装axios
      • 封装请求api
      • • 1. 在src目录下新建个api目录，里面放请求相关的文件，新建`request.js`文件，首先引入`axios`
        • 2. 创建一个`axios`实例
        • 3. axios请求拦截器
        • 4. axios响应拦截器
        • 5. 封装请求函数，可以根据项目实际情况处理参数（此处仅处理了get与post请求）
        • 6. 最后导出函数方法
      • 使用方式
      • • 1. 可以将接口全部定义在一个文件内（方便管理）
        • 2. 另一种写法是直接在项目内使用
    • 总结
    • 扩展阅读

---

前言

axios的API很友好，可以在项目中直接使用。但是在大型项目中，http请求很多，且需要区分环境， 每个网络请求有相似需要处理的部分，会导致代码冗余，破坏工程的可维护性，扩展性，所以需要对axios请求进行相应的封装

---

正文

安装axios

# npm 安装 npm install axios # yarn 安装 yarn add axios

• 1
• 2
• 3
• 4

封装请求api

1. 在src目录下新建个api目录，里面放请求相关的文件，新建request.js文件，首先引入axios

import axios from 'axios';

• 1

2. 创建一个axios实例

// request.js // 创建新的axios实例 const service = axios.create({ // 环境变量，需要在.env文件中配置 baseURL: process.env.VUE_APP_BASE_API, // 超时时间暂定5s timeout: 5000, });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

3. axios请求拦截器

config里面配置请求前的一些处理，例如：数据转化，配置请求头，设置token,设置loading等，根据需求去添加

// request.js service.interceptors.request.use( config => { // 此处添加Loading return config; }, error => { return Promise.reject(error); } );

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

接下来加入Loading，使用了vant组件的Toast提示，所以先引入vant，其他UI库同理

# Vue 3 项目，安装最新版 Vant npm i vant # 通过 yarn 安装 yarn add vant

• 1
• 2
• 3
• 4

// request.js // 使用vant组件的Toast提示，import引入要放在项目最上方 import { showToast, showLoadingToast, closeToast, setToastDefaultOptions } from 'vant'; import 'vant/es/toast/style'; //显示持续时长 setToastDefaultOptions({ duration: 3000 }); // loading 次数 let loadingCount = 0; service.interceptors.request.use( config => { // 加入Loading showLoadingToast({ message: '加载中...', //禁止背景点击 forbidClick: true, }); loadingCount++; return config; }, error => { return Promise.reject(error); } );

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

4. axios响应拦截器

// request.js service.interceptors.response.use( response => { // 关闭loading loadingCount--; if (loadingCount === 0) { closeToast(); } return response; }, error => { closeToast(); // 处理异常情况，根据项目实际情况处理或不处理 if (error && error.response) { // 根据约定的响应码处理 switch (error.response.status) { case 403: error.message = '拒绝访问'; break; case 502: error.message = '服务器端出错'; break; default: error.message = `连接错误${error.response.status}`; } } else { // 超时处理 error.message = '服务器响应超时，请刷新当前页'; } showToast(error.message); return Promise.resolve(error.response); } );

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

5. 封装请求函数，可以根据项目实际情况处理参数（此处仅处理了get与post请求）

// request.js const Request = (url, options = {}) => { let method = options.method || 'get'; let params = options.params || {}; if (method === 'get' || method === 'GET') { return new Promise((resolve, reject) => { service .get(url, { params: params, }) .then(res => { if (res && res.data) { resolve(res.data); } }) .catch(err => { reject(err); }); }); } else { return new Promise((resolve, reject) => { service .post(url, params) .then(res => { if (res && res.data) { resolve(res.data); } }) .catch(err => { reject(err); }); }); } };

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35

6. 最后导出函数方法

// request.js export default Request;

• 1
• 2

使用方式

1. 可以将接口全部定义在一个文件内（方便管理）

在request.js文件同级目录内新建index.js

// index.js import http from './request'; export function getXXX() { return http('/api/get'); } export function postXXX(params) { return http('/api/post', { method: 'POST', params: params, }); }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

然后在项目中引入

import { getXXX, postXXX } from "./api/index"; getXXX().then(res => { // ... }); let params = { pageNum: 1, pageSize: 10, }; postXXX(params).then(res => { // ... });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

2. 另一种写法是直接在项目内使用

import http from "./api/request"; http('/api/get').then(res => { // ... }); let params = { pageNum: 1, pageSize: 10, }; http('/api/post', { method: 'POST', params: params, }).then(res => { // ... });;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

---

总结

本文通过vue3+vant4的项目例子介绍了如何在项目里封装axios请求，其实vue2里面写法也类似，axios封装没有一个绝对的标准，需要结合项目中实际场景来设计。

如果此篇文章对您有帮助欢迎您【点赞】，也欢迎您【评论】+【收藏】！

---

扩展阅读

1. Axios中文文档
2. Vant4 Toast