vue中axios的拦截器与请求api的封装

news/2024/7/19 13:05:50 标签: vue, ajax, js, npm

之前在vue中请求数据都没有封装,前几天看了下别人写的封装,感受到封装了魅力,今天整理一下,本博客没有高大上的专业术语,只是普通的白话文,便于理解。

标题下载安装axios的命令

npm install axios

标题1.Axios的拦截器与api封装使用

(1)axios请求封装原理,直接上图,想看具体原理的可以到 axios官网查看
在这里插入图片描述
在这里插入图片描述

vueutilaxiosjs_7">标题2,在vue文件夹下创建一个util文件夹,这个名字大家可以随便写,在此文件夹下创建axios.js文件,这个文件下放的是拦截器代码。

在这里插入图片描述

 代码如下

import axios from “axios”
// 创建axios 赋值给常量service
const service = axios.create();

// 添加请求拦截器(Interceptors)
service.interceptors.request.use(function (config) {
// 发送请求之前做写什么
return config;
}, function (error) {
// 请求错误的时候做些什么
return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default service

标题3.api的封装,在src文件下创建api文件夹,在此文件夹下放api请求

在这里插入图片描述

标题4.api的使用

在这里插入图片描述
在这里插入图片描述

这样一个简单封装就成功了


http://www.niftyadmin.cn/n/1562819.html

相关文章

Python3与OpenCV3.3 图像处理(九)--高斯模糊

一、什么是高斯模糊 把要模糊的像素色值统计,用数学上加权平均的计算方法(高斯函数)得到色值,对范围、半径等进行模糊 二、高斯模糊的应用场景 一些美颜软件、美颜相机上的磨皮和毛玻璃特效基本上都是用的高斯模糊,并且大部分图像处理软件中都有高斯模糊的操作,除此之外,…

CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧。之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的,所以…

Python3与OpenCV3.3 图像处理(十)--EPF

一、什么是EPF 高斯模糊只考虑了权重,只考虑了像素空间的分布,没有考虑像素值和另一个像素值之间差异的问题,如果像素间差异较大的情况下(比如图像的边缘),高斯模糊会进行处理,但是我们不需要处理边缘,要进行的操作就叫做边缘保留滤波(EPF) 二、示例 import cv2 as c…

vue-cli使用pdf.js插件浏览pdf文件,禁止下载打印复制粘贴。

很多项目中都会有预览pdf文件,普通的可以直接使用a标签来实现该功能,但是此预览是浏览器自带的,有时候项目需求中会有禁止用户禁止下载和打印功能,浏览器自带的是无法满足的。 小编在网上找到pdf.js插件,pdf.js插件是可…

Python3与OpenCV3.3 图像处理(十一)--图像直方图

一、什么是图像直方图 由于其计算代价较小,且具有图像平移、旋转、缩放不变性等众多优点,广泛地应用于图像处理的各个领域,特别是灰度图像的阈值分割、基于颜色的图像检索以及图像分类。 二、应用范围 图像主题内容与背景分离、图像分类、检索等 三、示例 注意:编写代码前需…

实数比较

版权声明&#xff1a;您好&#xff0c;转载请留下本人博客的地址&#xff0c;谢谢 https://blog.csdn.net/hongbochen1223/article/details/44811681 要求用户输入两个实数&#xff0c;程序通过比较之后&#xff0c;输出最大的数。 在这里学习到了三目运算符。 #include <s…

js将数组转字符,字符转回数组

js将数组转字符&#xff0c;字符转回数组 在项目中碰见一个问题&#xff0c;jq传参时只识别字符&#xff0c;但是我们要将数组传过去。可以先将数组转换为字符&#xff0c;传过去后在转为数组。 数组转字符 使用JSON.stringify() console的结果 字符转换回数组 使用JSON.pa…

Python3与OpenCV3.3 图像处理(十二)--图像直方图应用

一、调节对比度 import cv2 as cvdef equalHist(image):"""直方图均衡化,图像增强的一个方法"""#彩色图片转换为灰度图片gray=cv.cvtColor(image,cv.COLOR_BGR2GRAY)#直方图均衡化,自动调整图像的对比度,让图像变得清晰dst=cv.equalizeHist(g…