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

ops/2024/12/15 14:00:27/

接之前的博客设计从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.ppmy.cn/ops/142122.html

相关文章

微服务-01

1.认识微服务 1.1 单体架构 单体架构&#xff08;monolithic structure&#xff09;&#xff1a;顾名思义&#xff0c;整个项目中所有功能模块都在一个工程中开发&#xff1b;项目部署时需要对所有模块一起编译、打包&#xff1b;项目的架构设计、开发模式都非常简单。 当项目…

skywalking实现链路追踪-笔记

本文属于b站图灵课堂springcloud笔记系列。讲的好还不要钱&#xff0c;值得推荐。 为什么采用链路追踪&#xff1f; 为了排查问题&#xff0c;从请求源头到底层服务的全链路环节进行追踪。 skywalking 是什么&#xff1f; 分布式系统的应用程序性能监视工具&#xff0c;专为…

金融机构远程办公面临的安全挑战

当前&#xff0c;金融机构的业务模式、IT架构都发生了深刻变化。在建设远程办公系统时&#xff0c;金融机构需要面对以下几个方面的挑战&#xff1a; 如何实现“边界模糊化”网络环境下的安全接入&#xff1f; 随着金融机构基础设施云化、业务互联网化和办公移动化&#xff0…

上传文件时获取音视频文件时长和文本文件字数

获取音视频文件时长和文本文件字数 一、获取音视频文件时长二、计算文本文件字数 最近有个需求&#xff0c;要求上传文件时获取音视频文件时长和文本文件字数&#x1f436;。 发现这样的冷门资料不多&#xff0c;特做个记录。本文忽略文件上传功能&#xff0c;只封装核心的工具…

3D 生成重建036-HyperDiffusion直接生成nerf几何

3D 生成重建036-HyperDiffusion直接生成nerf几何 文章目录 0 论文工作1 论文方法2 实验结果 0 论文工作 作者提出了一种名为HyperDiffusion的新型方法&#xff0c;用于直接生成隐式神经辐射场&#xff0c;方法是预测其权重空间中的参数。与以往需要对神经网络的单个实例进行优…

用人话讲计算机:Python篇!(十二)正则运算+re模块

目录 一、正则表达式 &#xff08;1&#xff09;什么是正则表达式 &#xff08;2&#xff09;它的结构及使用 示例&#xff1a; 1.字符 . &#xff08;←这里有个小点哦&#xff09; 2.字符 | 3.字符 [ ] 4.字符^ 5.字符\d &#xff08;3&#xff09;补充&#xff…

AJAX家政系统自营+多商家家政系统服务小程序PHP+Uniapp

一款同城预约、上门服务、到店核销家政系统&#xff0c;用户端、服务端、门店端各端相互依赖又相互独立&#xff0c;支持选择项目、选择服务人员、选择门店多种下单方式&#xff0c;支持上门服务和到店核销两种服务方式&#xff0c;支持自营和多商家联营两种运营模式&#xff0…

BUUCTF之web篇

第一题 [极客大挑战 2019]EasySQL 打开靶机后可以看到这是一个登陆的页面 我们可以尝试两种方式登录 弱口令爆破&#xff08;bu’r’psuite&#xff09; 通过SQL注入里的万能密码来跳过账户和密码验证的过程 这里就需要万能密码a’or true # 在这里单引号的作用是结束用户名或…