VUE3项目学习系列--Axios二次封装(五)

Axios中文文档 | Axios中文网 (axios-http.cn)

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。在项目中进行二次封装的主要目的是为了使用其请求与响应的拦截处理。

1、依赖安装

pnpm install axios

2、配置

在src根目录下创建utils/request.ts,详细配置参考axios官网

// 进行axios二次封装,使用请求与响应拦截器
import axios from 'axios'
import { ElMessage } from 'element-plus'// 1、创建axios实例
const instance = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,timeout: 1000,headers: { 'X-Custom-Header': 'foobar' }
});// 2、添加请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 3、添加响应拦截器
instance.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response.data;
}, function (error) {let message = '';let status = error.response.status;// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么switch (status) {case 401:message = "TOKEN过期";break;case 403:message = "无权访问";break;case 404:message = "请求地址错误";break;case 500:message = "服务器异常";break;default:message = "网络异常"}// 错误提示ElMessage({type:'error',message});return Promise.reject(error);
});// 对外暴露axios
export default instance;

3、使用

在App.vue中的script下使用封装的接口进行请求测试,接口使用mock模拟接口,mock使用看彩蛋部分。

// 使用axios封装接口import request from '@/utils/request'import { onMounted } from 'vue'// 在组件挂在完后测试发送请求onMounted(() => {request({url: '/user/login',method: 'post',data: {username: 'admin',password: '123456'}}).then(res => {console.log(res);})})

4、彩蛋Mock接口使用

(1)安装依赖

pnpm install -D vite-plugin-mock mockjs

(2)配置mock

在vite.config.ts中配置文件启用插件,注意引用mock插件需要调整defineconfig方法结构

 mock 版本低与3.0时使用localEnabled:command === 'serve',否则: enable: command === 'serve'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'// 引入svg
import { viteMockServe } from 'vite-plugin-mock'//mock提供插件方法// https://vitejs.dev/config/
export default defineConfig(({ command }) => {return {plugins: [vue(),// 创建svg插件createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],symbolId: 'icon-[dir]-[name]',}),// 创建mock插件viteMockServe({enable: command === 'serve'}),],resolve: { alias: { '@': path.resolve('./src') } },// scss全局变量配置css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "./src/styles/variable.scss";',},},},}
})

(3)创建mock接口,在根目录下创建mock/user.ts


function createUserList() {return [{userId: 1,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'admin',password: '123456',desc: '平台管理员',roles: ['平台管理员'],buttons: ['cuser.detail'],routes: ['home'],token: 'Admin Token',},{userId: 2,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'system',password: '123456',desc: '系统管理员',roles: ['系统管理员'],buttons: ['cuser.detail', 'cuser.user'],routes: ['home'],token: 'System Token',},]}export default [// 用户登录接口{url: '/api/user/login', //请求地址method: 'post', //请求方式response: ({ body }) => {//获取请求体携带过来的用户名与密码const { username, password } = body//调用获取用户信息函数,用于判断是否有此用户const checkUser = createUserList().find((item) => item.username === username && item.password === password,)//没有用户返回失败信息if (!checkUser) {return { code: 201, data: { message: '账号或者密码不正确' } }}//如果有返回成功信息const { token } = checkUserreturn { code: 200, data: { token } }},},// 获取用户信息{url: '/api/user/info',method: 'get',response: (request) => {//获取请求头携带tokenconst token = request.headers.token//查看用户信息是否包含有次token用户const checkUser = createUserList().find((item) => item.token === token)//没有返回失败的信息if (!checkUser) {return { code: 201, data: { message: '获取用户信息失败' } }}//如果有返回成功信息return { code: 200, data: { checkUser } }},},]

(4)测试使用,main.ts中添加如下代码

// 4、测试mock接口
import axios from 'axios'
axios({url:'/api/user/login',method:"post",data:{username:'admin',passwork:'123456'}
})

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

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

相关文章

【洛谷 P8637】[蓝桥杯 2016 省 B] 交换瓶子 题解(贪心算法)

[蓝桥杯 2016 省 B] 交换瓶子 题目描述 有 N N N 个瓶子,编号 1 ∼ N 1 \sim N 1∼N,放在架子上。 比如有 5 5 5 个瓶子: 2 , 1 , 3 , 5 , 4 2,1,3,5,4 2,1,3,5,4 要求每次拿起 2 2 2 个瓶子,交换它们的位置。 经过若干次…

解释器模式(Interpreter Pattern)

解释器模式 说明 解释器模式(Interpreter Pattern)属于行为型模式,是指给定一门语言,定义它的语法(文法)的一种表示,并定义一个解释器,该解释器使用该表示来解释语言中的句子。是一…

[NSSRound#18 Basic]web解析

文章目录 门酱想玩什么呢?Becomeroot 门酱想玩什么呢? 打开题目,加载完视频后要求我们给个游戏链接 点开评论区不难发现应该是想玩元梦之星,这里有个评论功能可以上传图片 我们随便输入点东西发现是插入并赋值到content元素里面 …

提示找不到MSVCP140.dll无法继续执行此代码的多种解决方法

当计算机系统在运行过程中突然提示“丢失MSVCP140.dll”这一错误信息时,意味着系统无法找到并加载这个至关重要的动态链接库文件。MSVCP140.dll是Microsoft Visual C Redistributable Package的一部分,对于许多基于Windows的应用程序来说,尤其…

Exam in MAC [容斥]

题意 思路 正难则反 反过来需要考虑的是: (1) 所有满条件一的(x,y)有多少对: x 0 时,有c1对 x 1 时,有c对 ...... x c 时,有1对 以此类推 一共有 (c2)(c1)/2 对 (2) 符合 x y ∈ S的有多少对&#xff1a…

openssl3.2 - note - Getting Started with OpenSSL

文章目录 openssl3.2 - note - Getting Started with OpenSSL概述笔记openssl 历史版本Configure 选项开关支持的OSopenssl 文档简介安装新闻每个平台的安装文档支持的命令列表配置文件格式环境变量 END openssl3.2 - note - Getting Started with OpenSSL 概述 看到官方文档…

物联网技术助力智慧城市转型升级:智能、高效、可持续

目录 一、物联网技术概述及其在智慧城市中的应用 二、物联网技术助力智慧城市转型升级的路径 1、提升城市基础设施智能化水平 2、推动公共服务智能化升级 3、促进城市治理现代化 三、物联网技术助力智慧城市转型升级的成效与展望 1、成效显著 2、展望未来 四、物联网技…

【C++初阶】C++入门(上)

C的认识 ①什么是C? ​ C语言是结构化和模块化的语言,适合处理较小规模的程序。对于复杂的问题,规模较大的程序,需要高度的抽象和建模时,C语言则不合适。 ​ 于是1982年,Bjarne Stroustrup(本…

D-阿洛酮糖-DAEase酶固定化载体及混合糖液分离

#D-阿洛酮糖-DAEase酶固定化载体及混合糖液分离 ​阿洛酮糖为白色固体晶体,无气味,具有较大的溶解度,柔和的口感,其具有传统甜味剂蔗糖70%的甜度,却几乎不提供任何热量。其与食物中的蛋白质,如鸡蛋蛋白发生…

ntp 部署

文章目录 简介ntp和ntpdate区别环境准备启动 简介 ntp全名 network time protocol 。NTP服务器可以为其他主机提供时间校对服务 ntp和ntpdate区别 两个服务都是centos自带的(centos7中不自带ntp)。ntp的安装包名是ntp;ntpdate的安装包是ntp…

【leetcode+深度/广度优先搜索】841. 钥匙和房间 (DFS,BFS)

leetcode-cn:leetcode面试75道精华:https://leetcode.cn/studyplan/leetcode-75/ 841.钥匙和房间:https://leetcode.cn/problems/keys-and-rooms/description/ 一、题目:841. 钥匙和房间 有 n 个房间,房间按从 0 到 n…

一对多文件传输该如何优化?

在数字化转型的浪潮中,企业对高效、安全的一对多文件传输需求日益增长。传统的文件传输方式,如纸质文件、电子邮件和FTP等,虽然在某些场景下仍然发挥作用,但在处理大规模、高频率的数据传输时,它们的局限性逐渐显现。本…

详细介绍Seq2Seq、Attention、Transformer !!

文章目录 前言 1、Seq2Seq工作原理 核心思想 工作原理 Encoder(编码器) Dncoder(解码器) 2、Attention工作原理 核心逻辑:从关注全部到关注重点 工作原理 Encoder(编码器) Decoder(解…

vue实现微信自带浏览器分享(小卡片形式)

注意&#xff1a;只能在微信自带浏览器打开进行分享 1.图片效果 2.cdn引入weixin-js-sdk的依赖 在index.html中引入 <script src"https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>2.在assets/js文件夹中创建share.js文件 import axios fr…

springboot271制造装备物联及生产管理ERP系统

制造装备物联及生产管理ERP系统设计与实现 摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装制造装备物联及…

考研模拟面试-答案【攻略】

考研模拟面试-答案【攻略】 前言版权推荐考研模拟面试-答案前面的问题通用问题专业题数据结构计算机网络操作系统数据库网络安全 手写题数据结构操作系统计算机网络 代码题基础代码题其他代码题 后面的问题补充题目 基础代码题答案链栈循环队列1循环队列2哈希表 最后 前言 202…

Oracle基础-分组查询 备份

一、概述 数据分组的目的是用来汇总数据或为整个分组显示单行的汇总信息&#xff0c;通常在查询结果集中使用GROUP BY 子句对记录进行分组。在SELECT 语句中&#xff0c;GROUP BY 子句位于FROM 子句之后&#xff0c;语法格式&#xff1a; SELECT columns_list FROM table_nam…

【数据结构】二叉搜索树底层刨析

文章目录 1. 二叉搜索树的实现2. 二叉搜索树的应用3. 改造二叉搜索树为 KV 结构4. 二叉搜索树的性能分析 1. 二叉搜索树的实现 namespace key {template<class K>struct BSTreeNode{typedef BSTreeNode<K> Node;Node* _left;Node* _right;K _key;BSTreeNode(const…

工作中用到的 —— 工作总结提炼出来的股文

这里是目录 ---------------- VUE相关 -----------------1 - Vue3 是怎么得更快的&#xff1f;1-1 Fragment [frɡˈment]1-2 Suspense [səˈspens]1-3 Teleport [ˈtelipɔːt]1-4 v-memo 2- 说一下 Composition API3- 说一下 setup4- watch 和 watchEffect 的区别5- Vue3 响…

Sublime查看ANSI编码文档乱码问题

原因为没有安装对应的解码插件。 选择安装插件包 选择插件包&#xff1a;ConvertToUTF8或者GBK&#xff0c;我试了第一个插件包不行&#xff0c;安装GBK插件包后OK。