axios请求拦截器和响应拦截器,封装naive-ui的 Loading Bar加载条和useMessage消息提示

接之前的博客设计从0开始边做边学,用vue和python做一个博客,非规范化项目,怎么简单怎么弄,跑的起来有啥毛病解决啥毛病(三),目前已经完成了基本的功能demo,但是请求接口不可能每个页面每个请求都写完整的axios请求,所以怎么把请求简单化,就涉及到的axios的封装了。

    • 开始封装axios
    • 请求拦截和消息提示
      • 请求拦截器
      • 响应拦截器
    • Loading Bar加载条和useMessage消息提示
      • 配置message这些的全局api
      • axios挂载加载条
      • axios挂载消息提示
      • 返回状态码

由原先页面中的请求:

axios.get('/api/article/' + id).then(function (response) {console.log(response);artcleinfo.content = response.data.data.contentartcleinfo.title = response.data.data.title}).catch(function (error) {console.log(error);});

变成这样:

getarticle(id).then(res=>{console.log(res)artcleinfo.content = res.data.contentartcleinfo.title = res.data.title
})

开始封装axios

首先在src下新建一个request文件夹用来存放请求等相关文件,然后文件夹下新建一个http.js 在这个文件中去把axios请求的一些公用逻辑封装到一起。

首先引入axios

import axios from 'axios'; // 引入axios

然后写一个get函数和post函数

export function get(url, params){return new Promise((resolve, reject) =>{axios.get(url, {params: params}).then(res => {resolve(res.data);}).catch(err =>{reject(err.data)})
})}export function post(url, params) {return new Promise((resolve, reject) => {axios.post(url,params).then(res => {resolve(res.data);}).catch(err =>{reject(err.data)})});
}

这个时候如果页面引入这个get请求也是可以正常请求的。

import get from '/src/request/http.js'get('/api/article/',1).then(res=>{console.log(res)
})

但是每个接口可能不止用一次,页面中这样写的话万一之后接口改了,每个页面还需要去找,去改,费时费力,所以就需要把接口全都放在一起去管理维护,然后页面中调用就好。
新建一个api.js文件在request目录下。

/// api.js
import { get, post } from './http'export const getarticle = (params) => {return get('/api/article', params)
}

然后页面中就可以直接使用封装的这个函数getarticle 进行数据的请求了。

getarticle(id).then(res=>{console.log(res)
})

这样就明朗多了

请求拦截和消息提示

虽然封装了请求,但是请求时会有一个请求和回复数据的时间问题,这个过程如果页面没有变化,那会不知道是否请求成功,是否开始请求,所以就涉及到发送请求之前对页面做些加载图标这些代表请求正在发送,然后请求回来的内容时候,页面提示请求成功或者失败或者异常信息等。

请求拦截器

axios有一个叫做请求拦截器的东西,就是每次发起请求之前可以写点东西放进去,然后每次请求之前都会执行一下,一般是请求之前判断token是否存在,或者请求的路径是否有权限等等

axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么,加token头、请求路由权限判断、等等等等return config;},function (error) {// 请求错误时做些什么return Promise.reject(error);}
);

响应拦截器

既然请求之前可以拦截处理那么,请求成功回复的内容也可以进行拦截处理,把一些请求体内不需要的数据可以剔出去,然后只把data数据留到页面。在这个位置可以对返回来的数据的异常进行处理,比如请求回来的数据找不到数据404,没有权限403等等,再或者前后端有数据AES加密等等,只要是对返回数据进行统一操作的,都在这个响应拦截器中进行。

axios.interceptors.response.use(function (response) {// 对响应数据做些什么,比如数据解密、数据转码等等return response;},function (error) {// 对响应错误做些什么,比如400报错事后给页面个提示,登录失效跳转登录页面等等return Promise.reject(error);}
);

Loading Bar加载条和useMessage消息提示

在这里插入图片描述

请求既然可以拦截了,那么就用naiveui的Loading Bar加载条对请求的是否正常和异常进行显示一下
在这里插入图片描述
就这种在浏览器顶部一个条条,跟随者请求加载来变化。
然后请求结果是否成功或者异常会有一个文字的弹窗提醒来说明,这块用到naiveui的useMessage消息提示
在这里插入图片描述

该说不说这个NaiveUi的全局配置对比element复杂的不是亿点点。。。
但是弄明白了之后,也就那么回事。

配置message这些的全局api

先不用管官网说的那些杂七杂八,什么全局api什么的,直接新建一个message.vue
然后里面这样写,因为我不会Ts,就按Js这个写法能用就行。

<template><div></div>
</template>
<script setup>
import { createDiscreteApi } from 'naive-ui'const { message, notification, dialog, loadingBar } = createDiscreteApi(['message', 'dialog', 'notification', 'loadingBar']
)window.$message = message;
window.$notification = notification;
window.$dialog = dialog;
window.$loadingBar = loadingBar;</script>

然后第二步,根据官网说的需要把用到这些消息的内容框起来,那就直接把APP.VUE包起来

<script setup>
import message from "./components/message.vue";
</script>
<template><n-message-provider><RouterView /><message></message></n-message-provider>
</template>
<style>

这个n-message-provider是必须的东西,用这个包上才能用这个message,然后把咱们写的全局挂载message组件也放在这,就能实现全局使用这个消息提示了。

axios挂载加载条

// 请求拦截
axios.interceptors.request.use(config => {window.$loadingBar.start()return config;},error => {window.$loadingBar.error()return Promise.error(error);})// 响应拦截器
axios.interceptors.response.use(response => {window.$loadingBar.finish()return response.data;},error => {window.$loadingBar.error()return Promise.reject(error.response);})

axios挂载消息提示

// 响应拦截器
axios.interceptors.response.use(response => {window.$loadingBar.finish()window.$message.success('请求成功')return response.data;},error => {window.$loadingBar.error()window.$message.error('请求失败')return Promise.reject(error.response);})

目前这样就可以实现加载条和消息提示了
在这里插入图片描述

返回状态码

为了让不同的状态,显示不同的信息提示,所以在返回拦截中需要配置不同的状态码来返回内容
改进之后的返回拦截器:

// 响应拦截器
axios.interceptors.response.use(response => {window.$loadingBar.finish()window.$message.success('请求成功')return response.data;},error => {window.$loadingBar.error()window.$message.error('请求失败')if (error.response.status ) {switch (error.response.status) {case 401:window.$message.error('未登录')router.push('/login')break;case 403:window.$message.error('没有权限')break;case 404:window.$message.error('请求错误')break;case 500:window.$message.error('服务器内部错误')break;case 504:window.$message.error('网络错误')break;default:window.$message.error('未知错误')break;}}return Promise.reject(error.response);})

之后就是每个状态码对应的操作,比如我在这个401状态没登录的情况下去跳转到login页面进行登录等等操作。

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

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

相关文章

Blue Ocean 在Jenkins上创建Pipeline使用详解

BlueOcean是Jenkins的一个插件,它提供了一套可视化操作界面来帮助用户创建、编辑Pipeline任务。以下是对BlueOcean中Pipeline操作的详细解释: 一、安装与启动BlueOcean 安装:在Jenkins的“系统管理”->“插件管理”->“可选插件”中搜索“BlueOcean”,然后点击“Ins…

opencv——识别图片颜色并绘制轮廓

图像边缘检测 本实验要用到Canny算法&#xff0c;Canny边缘检测方法常被誉为边缘检测的最优方法。 首先&#xff0c;Canny算法的输入端应为图像的二值化结果&#xff0c;接收到二值化图像后&#xff0c;需要按照如下步骤进行&#xff1a; 高斯滤波。计算图像的梯度和方向。非极…

基础库urllib的使用

学习爬虫&#xff0c;其基本的操作便是模拟浏览器向服务器发出请求&#xff0c;那么我们需要从哪个地方做起呢?请求需要我们自己构造吗?我们需要关心请求这个数据结构怎么实现吗?需要了解 HTTP、TCP、IP层的网络传输通信吗?需要知道服务器如何响应以及响应的原理吗? 可能…

剑指Offer|day4 LCR 004. 只出现一次的数字 II

LCR 004. 只出现一次的数字 II 给你一个整数数组 nums &#xff0c;除某个元素仅出现 一次 外&#xff0c;其余每个元素都恰出现 **三次 。**请你找出并返回那个只出现了一次的元素。 示例 1&#xff1a; 输入&#xff1a;nums [2,2,3,2] 输出&#xff1a;3提示&#xff1a…

Mysql学习笔记之SQL-1

上篇文章我们介绍了Mysql的安装&#xff0c;这篇文章我们介绍Mysql的操作语言SQL 1. 简介 sql全称&#xff08;Structured Query Language&#xff09;是结构化查询语言&#xff0c;操作关系型数据库的编程语言&#xff0c;定义了一套操作关系型数据库统一标准 2. sql分类 …

埃隆马斯克X-AI发布Grok-2大模型,快来体验~

引言 近年来&#xff0c;人工智能技术的快速发展推动了大语言模型的广泛应用。无论是日常生活中的智能助手&#xff0c;还是行业中的自动化解决方案&#xff0c;大语言模型都扮演着越来越重要的角色。2024年&#xff0c;X-AI推出了新一代的大模型——Grok-2&#xff0c;这款模…

PostgreSQL的学习心得和知识总结(一百六十三)|深入理解PostgreSQL数据库之 GUC参数compute_query_id 的使用和实现

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《PostgreSQL数据库内核分析》 2、参考书籍&#xff1a;《数据库事务处理的艺术&#xff1a;事务管理与并发控制》 3、PostgreSQL数据库仓库…

多线程编程杂谈(上)

问题 线程执行的过程中可以强制退出吗&#xff1f; 主动退出&#xff1f;被动退出&#xff1f; 问题抽象示例 需要解决的问题 g_run 全局变量需要保护吗&#xff1f; 如何编码使得线程中每行代码的执行可被 g_run 控制&#xff1f; 线程代码在被 g_run 控制并 "强制退…

【Git】:企业级开发和多人协作开发啊

目录 多人协作 模拟配置多人协作环境 多人同一分支开发 多人不同分支开发 远程分支删除后的问题 企业级开发模型 系统开发环境 分支设计规范 多人协作 模拟配置多人协作环境 目前&#xff0c;我们所完成的工作如下&#xff1a; 基本完成 Git 的所有本地库的相关操作&#xff…

【Sql优化】数据库优化方法、Explain使用

文章目录 一、金字塔优化模型二、SQL优化的利器&#xff1a;Explain工具1. Explain 的作用2. Explain 的用法 三、SQL优化方法&#xff08;后续文章细讲&#xff09;1. 创建索引减少扫描量2. 调整索引减少计算量3. 索引覆盖4. 干预执行计划5. SQL改写 四、通过 Explain 优化案例…

Deepmotion技术浅析(五):运动追踪

运动追踪是 DeepMotion 动作捕捉和 3D 重建流程中的核心模块之一。该模块的主要任务是在视频序列中跟踪人体的运动轨迹&#xff0c;捕捉人体各部分随时间的变化&#xff0c;并生成连续的 3D 运动数据。DeepMotion 的运动追踪技术结合了计算机视觉、深度学习和物理模拟等方法&am…

Android 系统应用重名install安装失败分析解决

Android 系统应用重名install安装失败分析解决 文章目录 Android 系统应用重名install安装失败分析解决一、前言1、Android Persistent apps 简单介绍 二、系统 persistent 应用直接安装需求分析解决1、系统应用安装报错返回的信息2、分析解决 三、其他1、persistent系统应用in…

使用Nexus3搭建npm私有仓库

一、npm介绍 npm的全称是Node Package Manager&#xff0c;它是一个开放源代码的命令行工具&#xff0c;用于安装、更新和管理Node.js模块。npm是Node.js的官方模块管理器&#xff0c;它允许用户从一个集中的仓库中下载和安装公共的Node.js模块&#xff0c;并将这些模块集成到…

【ChatGPT】解锁AI思维链:如何让机器像人类一样思考?

在人工智能领域&#xff0c;我们一直在追求让机器像人类一样思考。然而&#xff0c;即使是最先进的AI&#xff0c;也常常被诟病缺乏“常识”&#xff0c;难以理解复杂问题&#xff0c;更不用说像人类一样进行逻辑推理和解决问题了。最经常的表现就是遇到不会的地方&#xff0c;…

蓝桥杯刷题——day5

蓝桥杯刷题——day5 题目一题干解题思路一代码解题思路二代码 题目二题干解题思路代码 题目一 题干 给定n个整数 a1,a2,⋯ ,an&#xff0c;求它们两两相乘再相加的和&#xff0c;即&#xff1a; 示例一&#xff1a; 输入&#xff1a; 4 1 3 6 9 输出&#xff1a; 117 题目链…

监测预警智能分析中心建设项目方案

随着科技的不断进步&#xff0c;地理信息与遥感技术在国家治理、环境保护、灾害预警等领域发挥着越来越重要的作用。监测预警智能分析中心的建设&#xff0c;旨在通过集成先进的遥感技术、地理信息系统&#xff08;GIS&#xff09;、大数据分析和人工智能&#xff08;AI&#x…

【漫话机器学习系列】009.词袋模型(Bag of Words)

词袋模型&#xff08;Bag of Words, 简称 BoW&#xff09; 词袋模型是一种常见的文本表示方法&#xff0c;主要用于自然语言处理&#xff08;NLP&#xff09;和信息检索领域。它将文本数据转换为特征向量&#xff0c;忽略语序&#xff0c;仅考虑词的出现与否或出现频率。 1. 基…

分治算法(单选题)

2-1 分数 2 下列多少种排序算法用了分治法&#xff1f; 堆排序插入排序归并排序快速排序选择排序希尔排序 A.2 B.3 C.4 D.5 正确答案 A 2-2 分数 2 分治法的设计思想是将一个难以直接解决的大问题分割成规模较小的子问题&#xff0c;分别解决问题&#xff0c;最后将子…

UNIX简史

从1991年Linux出现至今&#xff0c;由于众多IT巨头以及技术社区的推动&#xff0c;Linux已经成为非常成熟、可用于各种关键领域的操作系统&#xff0c;适当了解其发展历史&#xff0c;对于理顺其技术流派、从而更好地学习和使用Linux具有重要意义。由于其基于UNIX系统二十多年的…

C# OpenCV机器视觉:畸变矫正

在一个阳光明媚的早晨&#xff0c;阿强决定去拍照。他拿起相机&#xff0c;穿上他最喜欢的羊毛大衣&#xff0c;准备记录下生活中的美好瞬间。可是&#xff0c;当他兴奋地查看照片时&#xff0c;发现自己拍的每一张都像是被外星人用变形金刚的力量扭曲过一样&#xff01;“这是…