当前位置: 首页 > news >正文

Vue 中简易封装网络请求(Axios),包含请求拦截器和响应拦截器

Vue 中简易封装网络请求(Axios),包含请求拦截器和响应拦截器

axios简介

Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js

Axios官方中文文档

特性

  • 从浏览器创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 超时处理
  • 查询参数序列化支持嵌套项处理
  • 自动将请求体序列化为:
    JSON (application/json)
    Multipart / FormData (multipart/form-data)
    URL encoded form (application/x-www-form-urlencoded)
  • 将 HTML Form 转换成 JSON 进行请求
  • 自动转换JSON数据
  • 获取浏览器和 node.js 的请求进度,并提供额外的信息(速度、剩余时间)
  • 为 node.js 设置带宽限制
  • 兼容符合规范的 FormData 和 Blob(包括 node.js)
  • 客户端支持防御XSRF

安装

npm install axios;

示例代码

https.js

import axios from "axios";
// const token = localStorage.getItem("accessToken");export const https = axios.create({baseURL: "http://localhost:3000",timeout: 15000,headers: {},
});// 添加请求拦截器
https.interceptors.request.use((config) => {// 在发送请求之前做些什么// if (token) {//   config.headers.accessToken = `Bearer ${token}`;// }return config;},(error) => {// 对请求错误做些什么// console.log(error);return Promise.reject(error);}
);// 添加响应拦截器
https.interceptors.response.use((response) => {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么// console.log(response);if (response.status === 200) {// console.log(Promise.resolve(response));return Promise.resolve(response);} else {return Promise.reject(response);}// return response;},(error) => {// 超出 2xx 范围的状态码都会触发该函数。console.log(error);// 对响应错误做点什么return Promise.reject(error);}
);

在Vue中引入使用

import { https } from "@/api/http";
//GET请求
// 写过的一个分页查询为例
https.get("/display", {params: {pageSize: page.pageSize.value,currentPage: page.currentPage.value,},}).then((res) => {console.log(res);}).catch((error) => {console.log(error);});// 另一种写法https.get("/display?ID=12345").then((res) => {console.log(res);}).catch((error) => {console.log(error);});//POST请求
https.post("/display", {id: id.value,}).then((res) => {console.log(res);}).catch((error) => {console.log(error);});

相关文章:

Vue 中简易封装网络请求(Axios),包含请求拦截器和响应拦截器

Vue 中简易封装网络请求(Axios),包含请求拦截器和响应拦截器 axios简介 Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js Axios官方中文文档 特性 从浏览器创建 XMLHttpRequests从 node.js 创建 http 请求支…...

git提交报错error: failed to push some refs to ‘git url‘

1.产生错误原因 想把本地仓库提交到远程仓库,报错信息如下 git提交报错信息 error: src refspec master does not match any error: failed to push some refs to git url 错误原因: 我们在创建仓库的时候,都会勾选“使用Reamdme文件初始化…...

【Python】(自定义函数)模块的相对路径导入

是我以前写的老文章的升级版,本质上使用exec和sys.path实现相对路径导入。 RelativeImport: __version__1.1.0 __author__Ls_Janimport os import sys import inspectdef RelativeImport(module,*args):#模块导入module为模块所在路径(模块名不需要.py后…...

巧妙之中见真章:深入解析常用的创建型设计模式

设计模式之创建型设计模式详解 一、设计模式是什么?二、模板方法2.1、代码结构2.2、符合的设计原则2.3、如何扩展代码2.4、小结 三、观察者模式3.1、代码结构3.2、符合的设计原则3.3、如何扩展代码3.4、小结 四、策略模式4.1、代码结构4.2、符合的设计原则4.3、如何…...

Selenium切换窗口、框架和弹出框window、ifame、alert

一、切换窗口 #获取打开的多个窗口句柄 windows driver.window_handles #切换到当前最新打开的窗口 driver.switch_to.window(windows[-1]) #最大化浏览器 driver.maximize_window() #刷新当前页面 driver.refresh() 二、切换框架frame 如存在以下网页&#xff1a; <htm…...

QT linux下应用程序打包

一、应用程序app 1、应用程序的pro文件 2、 程序工作函数 3、app的UI界面 二、动态库lib 1、Lib类头文件 2、.cpp文件 三、对应用程序和动态库进行构建 1、对动态库进行qmake,然后进行构建 2、对应用程序进行qmake&#xff0c;然后进行构建 3、查看构建目录 四、编写脚本 …...

Java高级技术(单元测试)

一&#xff0c;概括 二&#xff0c;junit 三&#xff0c;案例 &#xff08;1&#xff09;&#xff0c;实验类 package com.bilibili;public class Name {public static void main(String name) {if (name null){System.out.println("0");return;}System.out.print…...

leetCode 1080.根到叶路径上的不足节点 + 递归 + 图解

给你二叉树的根节点 root 和一个整数 limit &#xff0c;请你同时删除树中所有 不足节点 &#xff0c;并返回最终二叉树的根节点。假如通过节点 node 的每种可能的 “根-叶” 路径上值的总和全都小于给定的 limit&#xff0c;则该节点被称之为 不足节点 &#xff0c;需要被删除…...

C++基础 -10- 类

类的格式 public:公共成员 类外可访问 protected:保护成员 类外不可访问 private:私有成员 类外不可访问 class base {public:int a;protected:int b;private:int c;};...

【软件测试】性能测试相关指标

性能测试 了解性能测试相关指标 1.什么是做性能测试 1.1 生活中遇到的软件性能问题 软件用着用着就不能用了&#xff0c;一看热搜&#xff0c;发现该软件的服务器崩崩溃了。 1.2 性能测试定义 测试人员借助性能测试工具&#xff0c;模拟系统在不同场景下&#xff0c;对应…...

Leetcode 2943. Maximize Area of Square Hole in Grid

Leetcode 2943. Maximize Area of Square Hole in Grid 1. 解题思路2. 代码实现 题目链接&#xff1a;2943. Maximize Area of Square Hole in Grid 1. 解题思路 这一题的话其实横轴和竖轴可以分开来独立考察&#xff0c;因为两者互不影响&#xff0c;我们最终的答案一定是两…...

qt 简单了解QHBoxLayout QVBoxLayout QFormLayout水平,垂直,表单布局管理器.

QHBoxLayout水平布局,QVBoxLayout垂直布局,QFormLayout表单布局管理器,是常用的布局管理器,是用代码编写应用界面必不可少的功能类. 1.tips 这里值得注意的是,2个单选按钮(QRadioButton)同时放进一个水平布局管理器(QHBoxLayout)中,相当于放进了一个分组器中,此时,2个单选按钮…...

springboot中4级配置文件优先级

springboot中4级配置文件优先级...

Python(八十九)函数的参数的内存分析

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…...

西南科技大学C++程序设计实验二(类与对象一)

C++最大的特点就是面向对象,掌握它的几种基本性质还是好理解的,可以看我C++专栏的期末速成,希望对你们学习C++有帮助。 一、实验目的 1.理解简单类的定义、说明与使用 2.理解类中不同属性数据成员的访问特点 3.理解构造函数、析构函数的作用 重点:掌握类的定义与实现,…...

代码随想录二刷 |哈希表 |四数之和

代码随想录二刷 &#xff5c;哈希表 &#xff5c;四数之和 题目描述解题思路 & 代码实现 题目描述 18.四数之和 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nu…...

KMP算法【数据结构】

KMP算法 KMP算法是一种改进的字符串匹配算法 Next[j] k :一个用来存放子串返回位置的数组&#xff0c;回溯的位置用字母k来表示。其实就是从匹配失败位置&#xff0c;找到他前面的字符串的最大前后相等子串长度。默认第一个k值为-1(Next[0] -1),第二个k值为0(Next[1] 0),我…...

测开笔记--Typescript: 文件复制到指定目录

开发背景&#xff1a; 自动化开发语言使用的是TypeScript&#xff1b;框架用的是playwright。有个测试脚本需要先将几个文件复制粘贴到新建的项目文件夹下&#xff0c;系统会读取该文件&#xff0c;然后生成页面信息。 关键字&#xff1a;文件复制粘贴&#xff1b; 新建的项目…...

数字滚动vue-count-to

数字滚动 下载插件 npm i vue-count-to 使用 start-val 起始值&#xff0c;表示从什么值开始滚 end-val 终点值&#xff0c;表示要滚到多大值 duration 滚动事件&#xff0c;表示用多长时间来滚动 <countTo :start-val"0" :end-val"228" :duration&quo…...

扩散模型实战(十一):剖析Stable Diffusion Pipeline各个组件

推荐阅读列表&#xff1a; 扩散模型实战&#xff08;一&#xff09;&#xff1a;基本原理介绍 扩散模型实战&#xff08;二&#xff09;&#xff1a;扩散模型的发展 扩散模型实战&#xff08;三&#xff09;&#xff1a;扩散模型的应用 扩散模型实战&#xff08;四&#xff…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...