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
封装请求api
1. 在src目录下新建个api目录,里面放请求相关的文件,新建request.js文件,首先引入axios
import axios from 'axios';
2. 创建一个axios实例
// request.js
// 创建新的axios实例
const service = axios.create({// 环境变量,需要在.env文件中配置baseURL: process.env.VUE_APP_BASE_API,// 超时时间暂定5stimeout: 5000,
});
3. axios请求拦截器

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

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

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

# Vue 3 项目,安装最新版 Vant
npm i vant
# 通过 yarn 安装
yarn add vant
// 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 => {// 加入LoadingshowLoadingToast({message: '加载中...',//禁止背景点击forbidClick: true,});loadingCount++;return config;},error => {return Promise.reject(error);}
);
4. axios响应拦截器
// request.js
service.interceptors.response.use(response => {// 关闭loadingloadingCount--;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);}
);
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);});});}
};
6. 最后导出函数方法
// request.js
export default Request;
使用方式
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,});
}

然后在项目中引入

import { getXXX, postXXX } from "./api/index";
getXXX().then(res => {// ...
});
let params = {pageNum: 1,pageSize: 10,
};
postXXX(params).then(res => {// ...
});
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 => {// ...
});;

总结

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

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


扩展阅读

  1. Axios中文文档
  2. Vant4 Toast

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/768902.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

边缘计算基础介绍及AKamai-linode产品分析

1、背景 随着互联网的发展,我们进入了大数据时代,这个时代也是移动互联网的时代,而且这个时代,大量的线下服务走到线上,随之而来的,比如外卖、叫车……于是,有各种各样的 App 和设备在收集你的…

对尾递归的理解,有哪些应用场景

文章目录 一、递归二、尾递归二、应用场景参考文献 一、递归 递归(英语:Recursion) 在数学与计算机科学中,是指在函数的定义中使用函数自身的方法 在函数内部,可以调用其他函数。如果一个函数在内部调用自身本身&am…

电子电器架构 —— 诊断数据DTC具体故障

电子电器架构 —— 诊断数据DTC具体故障 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师 (Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 本就是小人物,输了就是输了,不要在意别人怎么看自己。江湖一碗茶,喝完再挣…

qt5-入门-标签页部件QTabWidget-2-新增和删除标签页

参考: C GUI Programming with Qt 4, Second Edition 本地环境: win10专业版,64位,Qt5.12 上一篇: qt5-入门-标签页部件QTabWidget-1-CSDN博客 https://blog.csdn.net/pxy7896/article/details/136883359 目录 效果实…

机器学习之线性回归与逻辑回归【完整房价预测和鸢尾花分类代码解释】

目录 前言 一、什么是线性回归 二、什么是逻辑回归 三、基于Python 和 Scikit-learn 库实现线性回归 示例代码: 使用线性回归来预测房价: 四、基于Python 和 Scikit-learn 库实现逻辑回归 五、总结 线性回归的优缺点总结: 逻辑回归(Logistic…

Day30:学习SpringCloud

学习计划:完成尚硅谷的尚上优选项目 学习进度:完成尚上优选项目的前置知识点:SpringCloud 知识点: MQ高级 惰性队列 消息堆积问题惰性队列 MQ集群 集群分类普通集群镜像集群仲裁队列

WiFi已连接却不可上网是什么原因?

很多使用wifi上网的用户都遇到过这样的问题,就是电脑已经连接了wifi,但就是上不了网。着到底是怎么回事呢?今天,极客狗带大家一起来找找WiFi已连接却不可上网是什么原因,并给出对应的解决方。 原因分析: 可能是ip地址冲突所导致,也有可能是宽带出先故障,不妨试试下面的…

DeepLearning in Pytorch|手写数字识别器_minst_convnet

目录 概要 一、代码概览 二、使用步骤 1.引入库 2.超参数的定义和数据集的预处理 3.构建网络 4.训练 5.测试 三、剖析 1.各层运算 2.健壮性实验 总结 概要 系列文章为《深度学习原理与Pytorch实践》学习笔记 Pytorch 2.2.1 (CPU) Python 3.6.13|Anaconda 环境 一、代码概览 …

零基础入门数据挖掘系列之「特征工程」

摘要:对于数据挖掘项目,本文将学习应该从哪些角度做特征工程?从哪些角度做数据清洗,如何对特征进行增删,如何使用PCA降维技术等。 特征工程(Feature Engineering)对特征进行进一步分析&#xf…

VUE3 网络异步操作的两种方式

描述 开发过程中,我需要先通过网络请求1获取一个值,通过得到的值去作为网络请求2 的输入。如代码所示: // 请求1,得到number1.value api.diagnose({state:"readwave", index:index}).then(res >{number1.value re…

Python - 深度学习系列30 - 使用LLaMA-Factory微调模型

说明 最实用的一种利用大语言模型的方式是进行微调。预训练模型与我们的使用场景一定会存在一些差异,而我们又不可能重头训练。 微调的原理并不复杂,载入模型,灌新的数据,然后运行再训练,保留checkpoints。但是不同项…

html5cssjs代码 037 多列显示

html5&css&js代码 037 多列显示 一、代码二、解释1. 设置column-count2. 调整column-gap3. 自定义列宽度4. 应用到HTML元素注意事项 在HTML中,要实现多列显示,通常会使用CSS的column属性。这个属性允许你将内容自动分割成多个列,类似…

ExoPlayer架构详解与源码分析(12)——Cache

系列文章目录 ExoPlayer架构详解与源码分析(1)——前言 ExoPlayer架构详解与源码分析(2)——Player ExoPlayer架构详解与源码分析(3)——Timeline ExoPlayer架构详解与源码分析(4)—…

华为配置AP静态上线业务实验

配置AP静态上线业务示例 组网图形 图1 配置AP静态上线业务示例组网图 业务需求组网需求数据规划配置思路操作步骤配置文件扩展阅读 业务需求 管理员希望为AP配置静态IP地址,使AP能够找到正确的AC,当AP通过AC的认证后,实现AP在AC中正常上…

C++项目——集群聊天服务器项目(四)MySQL数据库

今天来介绍集群聊天器项目中MySQL数据库的相关表结构 集群聊天服务器项目需要进行好友、群组的增删操作以及好友离线状态的判断,需要在数据库中建立相关表进行增删改查操作,因此项目设计了如下五个表,大家可以自己动动小手,使用S…

机器学习——元学习

元学习(Meta Learning)是一种机器学习方法,旨在使模型能够学习如何学习。它涉及到在学习过程中自动化地学习和优化学习算法或模型的能力。元学习的目标是使模型能够从有限的训练样本中快速适应新任务或新环境。 在传统的机器学习中&#xff…

海外媒体宣发:十大国外中文网站-大舍传媒

十大国外中文网站 1、欧洲时报 覆盖欧洲且较具影响力的华文媒体 国外中文新闻网站,欧洲时报文化传媒集团旗舰日报《欧洲时报》旗下官方网站,总部设在法国巴黎,创刊于1983年,现已成为唯一发行覆盖全欧、发行量最大、最具影响力的华…

ic到底还能不能入了?

不管你同意与否,这是我目前的观点: IC行业的高薪只要一天不降,对于普通家庭的孩子来说就是一个值得进入的行业。 但它的入行门槛只会越来越高直到达到一个高点并维持住。之前可能是科班硕士就能找到工作,现在就需要28所起步才可…

发展规划--IM系统

1、时代背景 5G应用,多终端应用,物联网应用,小程序,工业互联,大数据应用等等大前端时代的到来,程序员不能只关注crud,因为以后的服务并发量只会越来越多。 高并发架构师、大数据架构师或者说j…

数据结构-双向链表-003

1双向链表 1.1链表结点结构体定义 typedef struct student_data {char name[32];char sex;int age; }STU_DATA;typedef struct double_link_node {STU_DATA data;//数据域struct double_link_node *ppre;//指向上一个结点的指针struct double_link_node *pnext;//指向下一个结…