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

vue中axios请求篇

vue中如何发起请求?

利用axios来发起请求,但是前期需要配置

首先安装axios

可以使用npm、yarn等进行安装

  1. npm安装方式
npm install axios -sava //在项目文件夹中打开cmd或者终端进行安装依赖
  1.  yarn安装方式
yarn add axios

引入axios。我一般是在src下创建一个utils文件夹,在其中新建一个request.js放置封装好的axios

 2.创建实例

// 创建实例
const instance = axios.create()// 创建实例后修改默认值
axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? 'http://127.0.0.1:8081' : 'https://api.example.com' // 默认请求地址,需根据环境判断请求的路径
axios.defaults.timeout = 10000 // 超时时间,单位毫秒
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' // post请求头的设置

 3.请求拦截

/*** 请求拦截器* 每次请求前,如果存在token则在请求头中携带token*/
axios.interceptors.request.use(config => {LoadingBar.start()// 添加tokenconst token = getToken()token && (config.headers.Authorization = "Bearer " + token)return config},error => Promise.error(error)
)

4. 响应拦截 

/*** 响应拦截器* 每次请求后,判断请求状态码是否正确,及数据做处理*/
axios.interceptors.response.use(/*** 传输层:接口正常或异常,用http状态码* 业务层:业务正常或异常,用自定义状态码*/// 请求成功res => {LoadingBar.stop()// HTTP 状态码if (res.status !== 200) {return Promise.reject(res)}// 业务状态码let code = res.data.codeif (!code || code === 2000) {// 无code,则请求的是html页面;有code,则返回请求的数据return Promise.resolve(res.data)}errorHandle(code, res.data.msg)return Promise.reject(false)},// 请求失败error => {LoadingBar.stop()const { response } = errorif (response) {// 请求已发出,但是不在2xx的范围 errorHandle(response.status, response.data.message)return Promise.reject(response)} else {tip('网络出现故障,请稍后再试')}}
)

5. 错误处理 

/*** 请求失败后的错误统一处理* @param {Number} status 请求失败的状态码*/
const errorHandle = (status, msg) => {// 状态码判断switch (status) {// 2002: 用户名/密码错误case 2002:tip('用户名或密码错误!')break// 4003: token过期,清除token并跳转登录页case 4003:toLogin("登录信息过期")break// 其他状态码...default:tip('后台维护中,请稍后再试')}
}/**
* 提示函数
*/
const tip = msg => {// 使用UI框架自带的错误弹框即可Vue.prototype.$msg.error(msg)
}/*** 跳转登录页* 携带当前页面路由,以便在登录完成登录后返回当前页面*/
const toLogin = async (msg) => {// 移除token、用户信息// 跳转登录页router.replace({path: '/login',query: {redirect: router.currentRoute.fullPath}})
}

使用 axios

 1. 创建api接口

  以user模块为例,在src目录下新建api文件夹,用来存放项目的所有接口请求,新建user.js,代码如下

import axios from '@/utils/request'/*** @description: 用户登录* @param {String} username 用户名* @param {String} password 密码(aes加密)*/
export const userLogin = params => {return axios.post('/user/login', params)
}
// 其他user接口
...

页面使用

import { userLogin } from '@/api/user'userLogin({username: this.username,password: this.password, // 记得加密QAQ
}).then(res => {this.$msg.success('登录成功')
})

不封装单独使用

<script>//页面引入
import axios from 'axios'export default {data() {return {url:'https://xxxxxxxxxxxx.com/index.php?xxxxx'},},methods: {getVipAsklist(){axios.get(this.url).then(res => {console.log(res);if(res.data.result =='1'){this.asklist = res.data.qa_lsitthis.asklist = this.asklist.map((item)=>{return {title:item.title,content:item.content.replace(/\"/g, "&quot;")}})console.log(typeof this.asklist[0].content)this.agrement = res.data.xieyireturn}this.$message.error(res.msg)})},}
}
</script>

完美结束~

相关文章:

vue中axios请求篇

vue中如何发起请求? 利用axios来发起请求&#xff0c;但是前期需要配置 首先安装axios 可以使用npm、yarn等进行安装 npm安装方式 npm install axios -sava //在项目文件夹中打开cmd或者终端进行安装依赖 yarn安装方式 yarn add axios 引入axios。我一般是在src下创建一个u…...

Springboot2.0 上传图片 jar包导出启动(第二章)

目录 一&#xff0c;目录文件结构讲解二&#xff0c;文件上传实战三&#xff0c;jar包方式运行web项目的文件上传和访问处理&#xff08;核心知识&#xff09;最后 一&#xff0c;目录文件结构讲解 简介&#xff1a;讲解SpringBoot目录文件结构和官方推荐的目录规范 1、目录讲解…...

添加YDNS免费的ipv6动态域名解析

背景 又到了一年一度的dns域名到期&#xff0c;寻找替代了&#xff0c;前几年用了阿里、华为的免费域名&#xff0c;支持了几个搭建在NAS上的微服务&#xff1b;一旦涉及到域名续费&#xff0c;价格就比首年上去了不少&#xff0c;所以&#xff0c;打算找个长期的免费域名。 搜…...

爬虫异常处理之如何处理连接丢失和数据存储异常

在爬虫开发过程中&#xff0c;我们可能会遇到各种异常情况&#xff0c;如连接丢失、数据存储异常等。本文将介绍如何处理这些异常&#xff0c;并提供具体的解决代码。我们将以Python语言为例&#xff0c;使用requests库进行网络请求和sqlite3库进行数据存储。 1. 处理连接丢失 …...

KVM虚拟化ubuntu

KVM&#xff08;Kernel-based Virtual Machine&#xff09;是一种基于Linux内核的虚拟化技术&#xff0c;它将Linux内核作为虚拟机的底层操作系统&#xff0c;利用硬件虚拟化支持创建和管理虚拟机。KVM虚拟化技术被广泛应用于云计算、虚拟化服务器、虚拟化桌面等场景。 KVM虚拟…...

模拟电子技术基础学习笔记三 PN结

采用不周的掺杂工艺&#xff0c;将P型半导体与N型半导体制作在同一块硅片上&#xff0c;在它们的交界面就形成PN结。 扩散运动 物质总是从浓度高的地方向浓度低的地方运动&#xff0c;这种由于浓度差而产生的运动称为扩散运动。 空间电荷区 - 耗尽层 漂移运动 在电场力的作…...

java基础-----第七篇

系列文章目录 文章目录 系列文章目录一、什么是字节码?采用字节码的好处是什么?1.java中的编译器和解释器:2.采用字节码的好处:二、Java中的异常体系一、什么是字节码?采用字节码的好处是什么? 1.java中的编译器和解释器: Java中引入了虚拟机的概念,即在机器和编译程…...

useEffect 不可忽视的 cleanup 函数

在 react 开发中&#xff0c; useEffect 是我们经常会使用到的钩子&#xff0c;一个基础的例子如下&#xff1a; useEffect(() > {// some code here// cleanup 函数return () > {doSomething()} }, [dependencies])上述代码中&#xff0c; cleanup 函数的执行时机有如下…...

vue3:使用:批量删除功能

场景&#xff1a;vue中使用el-table,常需要记住上一页所勾选的数据&#xff0c;批量删除操作&#xff0c;或者弹窗分页勾选&#xff0c;进行第一页勾选&#xff0c;在调后端接口选择第二页勾选其他数据。 1、element-ui 的table表格可以轻松实现多选的功能&#xff0c;只要在表…...

Scala中的样例类和样例对象和JAVA存根类

Scala中的样例类和样例对象 在 Scala 中&#xff0c;样例类&#xff08;case class&#xff09;和样例对象&#xff08;case object&#xff09;都是用于定义不可变数据类型的特殊类和对象。它们被广泛用于模式匹配、代数数据类型&#xff08;Algebraic Data Types&#xff09…...

【0218】当SIGQUIT kill掉stats collector后,stats collector如何保存最终统计数据

1. stats collector可被哪些信号给kill? stats collector进程的主体函数是 PgstatCollectorMain(),该函数内部完成了stats collector进程的信号注册、现有统计文件读取、消息处理等任务。 忽略通常与postmaster中的某些操作绑定的所有信号,SIGHUP和SIGQUIT除外。 注意,我们…...

httplib 与 json.hpp 结合示例

httplib 与 json.hpp 结合示例 1、使用POST 接口&#xff0c;发送 登陆 请求 客户端发送 {nlohmann::json jsonOfCollectionInfo;jsonOfCollectionInfo["user_id"] "zhang";jsonOfCollectionInfo["password"] "123456";httplib::…...

RK3288安卓7.1开机上电到显示logo需要在3s内完成

需求&#xff1a; 从上电到开始开机logo有一段黑屏时间&#xff0c;这个黑屏时间大概在6s左右&#xff0c;给客户体验很不好&#xff0c;现在需要将这段黑屏时间缩短到2-3s左右 思路&#xff1a; 因为只需要早点显示logo&#xff0c;其实整体从上电到开机动画到安卓系统启动整体…...

Maven之hibernate-validator 高版本问题

hibernate-validator 高版本问题 hibernate-validator 的高版本&#xff08;邮箱注解&#xff09;依赖于高版本的 el-api&#xff0c;tomcat 8 的 el-api 是 3.0&#xff0c;满足需要。但是 tomcat 7 的 el-api 只有 2.2&#xff0c;不满足其要求。 解决办法有 2 种&#xff…...

C++--动态规划其他问题

1.一和零 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 给你一个二进制字符串数组 strs 和两个整数 m 和 n 。 请你找出并返回 strs 的最大子集的长度&#xff0c;该子集中 最多 有 m 个 0 和 n 个 1 。 如果 x 的所有元素也是 y 的元素&#xff0…...

PostgreSQL 查询语句大全

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

扫盲:常用NoSQL数据库

前言 关系型数据库产品很多&#xff0c;如 MySQL、Oracle、Microsoft SQL Sever 等&#xff0c;但它们的基本模型都是关系型数据模型。 非关系型数据库又称为&#xff1a;NoSQL &#xff0c;没有统一的模型&#xff0c;而且是非关系型的。 常见的 NoSQL 数据库包括键值数据库、…...

MPI之数据打包和解包

MPI_Pack 和 MPI_Unpack 它们可以将源数据打包成二进制格式以便于传输&#xff0c;或者将二进制格式的数据解包成目标数据。这对函数通常用于在 MPI 应用程序中进行异构系统间的通信&#xff0c;即两个系统之间使用不同的二进制格式进行交互通信。 打包&#xff08;序列化&…...

9.2作业

QT实现闹钟 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTimerEvent> #include<QDateTime> #include<QLineEdit> #include<QLabel> #include<QPushButton> #include <QTextToSpeech> QT_BEGIN_NAMES…...

数据库建设命名规范

1、数据库库表命名规范 1.1 数据库命名规范 采用26个英文字母(区分大小写)和0-9的自然数(经常不需要)加上下划线_组成&#xff0c;命名简洁明确&#xff0c;多个单词用下划线_分隔,一个项目一个数据库&#xff0c;多个项目慎用同一个数据库全部小写命名&#xff0c;禁止出现大…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

高抗扰度汽车光耦合器的特性

晶台光电推出的125℃光耦合器系列产品&#xff08;包括KL357NU、KL3H7U和KL817U&#xff09;&#xff0c;专为高温环境下的汽车应用设计&#xff0c;具备以下核心优势和技术特点&#xff1a; 一、技术特性分析 高温稳定性 采用先进的LED技术和优化的IC设计&#xff0c;确保在…...

五、jmeter脚本参数化

目录 1、脚本参数化 1.1 用户定义的变量 1.1.1 添加及引用方式 1.1.2 测试得出用户定义变量的特点 1.2 用户参数 1.2.1 概念 1.2.2 位置不同效果不同 1.2.3、用户参数的勾选框 - 每次迭代更新一次 总结用户定义的变量、用户参数 1.3 csv数据文件参数化 1、脚本参数化 …...

在Spring Boot中集成RabbitMQ的完整指南

前言 在现代微服务架构中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个流行的消息中间件&#xff0c;支持多种消息协议&#xff0c;具有高可靠性和可扩展性。 本博客将详细介绍如何在 Spring Boot 项目…...

GB/T 43887-2024 核级柔性石墨板材检测

核级柔性石墨板材是指以可膨胀石墨为原料、未经改性和增强、用于核工业的核级柔性石墨板材。 GB/T 43887-2024核级柔性石墨板材检测检测指标&#xff1a; 测试项目 测试标准 外观 GB/T 43887 尺寸偏差 GB/T 43887 化学成分 GB/T 43887 密度偏差 GB/T 43887 拉伸强度…...