位置: IT常识 - 正文

【vue2】axios请求与axios拦截器的使用详解(vue-axios详细介绍)

编辑:rootadmin
【vue2】axios请求与axios拦截器的使用详解

推荐整理分享【vue2】axios请求与axios拦截器的使用详解(vue-axios详细介绍),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue配置axios请求地址,vue axios 请求,vueajax请求,vueajax请求的五个步骤,vueajax请求,vue-axios详细介绍,vueajax请求的五个步骤,vueajax请求,内容如对您有帮助,希望把文章链接给更多的朋友!

🥳博       主:初映CY的前说(前端领域)

🌞个人信条:想要变成得到,中间还有做到!

🤘本文核心:当我们在路由跳转前与后我们可实现触发的操作

【前言】ajax是一种在javaScript代码中发请求并获取响应数据的技术,我们的axios是一个别人封装好的、用来发ajax请求的工具。那么我们发送请求与响应数据可以用来做什么呢?这样做有什么好处呢?可以实现——当我们不刷新页面的情况下,我们从服务器获取请求的数据,以局部更新我们定点的数据而不是我们整个页面的刷新。

目录

一、axios

1.1axios的请求方式

1.2请求方式的传参特点

1.3【经典面试题】get与post请求的区别

二、axios拦截器

2.1axios拦截器介绍

2.2axios拦截器使用

2.3总结axios拦截器

一、axios1.1axios的请求方式1.get

该请求方式常用于处理查询操作,比如我们在浏览器上搜索基本上用的使get请求

2.post

该请求常用于我们处理新增操作,比如我们对我们页面中的登录时进行增加数据进服务器

3.put

该请求常用于我们处理全部更新操作,比如我们对我们页面中的form表单进行全部修改

4.patch

该请求常用于我们处理局部更新操作,比如我们对我们页面中的form表单进行全部修改

5.delete

该请求常用于我们处理删除数据操作,处理页面上需要删除的信息常需要使用该请求方式

1.2请求方式的传参特点get常用于请求行传参post 、put、patch常用于请求体传参delete常用于请求行/请求参数传参1.3【经典面试题】get与post请求的区别

1.位置不同。我们的get是写在请求行中,post则是写在请求体中。也就是一个可以在地址栏可以看到我们的信息(get),一个需要按下F12在调试里面看我们传递的信息

2.速度不同。使用get因为有大小限制的原因,因此数据传输的速度长比post请求快

3.大小不同。get写在地址栏上面,因此有长度的限制,最大长度为2k左右,而我们的post写在请求体中没有大小的限制

4.安全性不同。get的参数可以直接看到,post参数需要按下F12来查看

二、axios拦截器2.1axios拦截器介绍

【授人以鱼不如授人以渔】我们通过官网出的文件来进行一个讲解:

请求拦截器:处理我们在发送请求之前需要经过的回调函数

相应拦截器:服务器响应之后返回给我们之前会被执行的回调函数

官网指南:拦截器 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

下图为上述超链接打开之后所看到的页面:

 我们将上述代码copy下来(这一大段代码不需要背下来,到了工作当中也是直接去axios官方中直接copy下来我们进行应用即可呦)

【vue2】axios请求与axios拦截器的使用详解(vue-axios详细介绍)

1.便于封装操作,我们常会建立一个专门的文件来写下我们的拦截器同基地址作为第一次封装。

【vue2小知识】实现axios的二次封装_初映CY的前说的博客

// 添加请求拦截器axios.interceptors.request.use( function (config) { // 在发送请求之前做些什么 return config }, function (error) { // 对请求错误做些什么 return Promise.reject(error) })// 添加响应拦截器axios.interceptors.response.use( function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error) })

我们将官网的这段代码获取下来了,兄弟姐妹们有没有发现官方甚至连注释都给我们写好了,很清晰明了的介绍了axios拦截器的用法,可知:

axios是我们用于发送Ajax请求之前以及我们在发送请求之后会执行的一个回调函数

2.2axios拦截器使用

1.在项目中先下载下我们的axios

至此我们知道了axiox的基本概念,那怎么在vue项目中引用?使用npm i axios 或者这 yarn add axios 将我们的axios下载下来(使用指南:npm的使用介绍)

2.项目中进行引入(与拦截器在同一个js文件)

import axios from 'axios'

 3.设置基地址,并且导入request

const request = axios.create({ baseURL: 'http://ajax-api.itheima.net/api', timeout: 5000 // 超过5s请求停止})export default request

4.根据接口文档写axios请求

import request from '@/utils/request'export function homeAddress (pname, cname) { return request({ url: '/area', method: 'GET', params: { pname: pname, cname: cname } })}

 5.页面中进行调用

<template> <div class="div1"> <button @click="getHomeAddress('江西省', '九江市')">点我获取地址</button> </div></template><script>import { homeAddress } from './api/address'export default { methods: { async getHomeAddress (pname, cname) { console.log(pname, cname) const res = await homeAddress(pname, cname) console.log('地址数据为:', res) } }}</script><style lang="less">.div1 { background-color: teal; button { height: 50px; display: block; margin: 30px auto; }}</style>

 6.点击按钮发送请求

 7.配置axios拦截器

7.1请求拦截器

在发送请求之前会执行的一个回调,常用于将token添加进请求头的Authorization中。

注意我们的axios实例是request因此从官网cv下来我们需要将axios改为request

// 添加请求拦截器request.interceptors.request.use( function (config) { // 在发送请求之前做些什么 console.log(config, 'config') console.log('嘿!我是在请求之前就执行的') return config // 发给服务器的信息 }, function (error) { // 对请求错误做些什么 return Promise.reject(error) })

 7.2响应拦截器

从服务器获取到了数据返回的时候先执行一个回调函数,常用于做状态码判断与脱壳处理

// 添加响应拦截器request.interceptors.response.use( function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 console.log(response, 'response') console.log('嘿!我是在请求之后就执行的,response为我们请求相应的结果') return response.data.data }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error) })

可以看到我们最终响应的值是我们response处理过的值

2.3总结axios拦截器

请求拦截器:在发送请求之前会执行的回调函数

响应拦截器:发送请求后服务器返回前执行的回调函数

——期待大家的关注与支持! 你的肯定是我更新的最大动力——
本文链接地址:https://www.jiuchutong.com/zhishi/299479.html 转载请保留说明!

上一篇:手把手教你基于HTML、CSS搭建我的相册(下)(基于什么意思)

下一篇:要点初见:开源AI绘画工具Stable Diffusion代码分析(文本转图像)、论文介绍(上)(开源原则)

  • 临时工工资怎么申报个人所得税
  • 其他应收款利息收入会计分录怎么写
  • 增值税电子普通发票和增值税专用发票区别
  • 滴滴的普票可以抵税吗
  • 业务人员差旅费为什么不计入投资性房地产成本
  • 增值税普通发票和普通发票的区别怎么交税
  • 企业会计做无票收入也要交税吗?
  • 项目一次性奖励会计分录怎么处理
  • 原材料什么时候结转成本
  • 一般纳税人出售固定资产税率
  • 小微企业分公司 企业所得税优惠
  • 没有计提12月底的工资
  • 个人给单位干的小工程需代扣个税吗?
  • 开发商乱要回迁怎么投诉
  • 航天金税费用怎么做账
  • 现金流量表中现金流量净额怎么算
  • 协会会费入账科目是哪个
  • 费用报销单如何粘贴票据
  • 大专生可以考公务员职位列表
  • 如何解决浏览器禁止访问
  • 如何整理流水账目
  • 申报补贴项目 审计
  • 百内国家公园塔状尖峰
  • php发送电子邮件
  • 股权转让的条件和方式
  • w10如何删除微软拼音
  • php数组函数,选班长
  • 微软输入法卸载不了
  • 理财产品利息税
  • 销售过程的主要内容
  • 怎么启用framework3.5
  • 所得税分配表分录怎么写
  • 捐款怎么处理
  • transformer的解码器
  • 基于Python的图书馆信息管理系统研发
  • 数学建模三个人谁最难
  • win11更新71
  • php跨域提交表单
  • 利润的调增和调减
  • 跨年发票可以作为税前扣除的时限
  • 小规模纳税人收入是含税还是不含税
  • centos上安装vscode
  • 现金折扣如何核算
  • 房产税的征收范围和标准有哪些
  • 股权转让需要开票吗怎么开
  • 增加固定资产原值50%以上
  • 确认销售收入时不影响应收账款入账金额的是
  • 去年一个月工资未计提直接计入成本,现在如何调整
  • 企业自查发现以什么为主
  • 冲以前年度成本分路
  • 印花税如何计提缴纳
  • 应付工资可以挂账多长时间
  • 购进货物未取得增值税专用发票可以抵扣进项税额吗
  • 应收利息和利息收入的差额
  • 单位固定资产统计表
  • 企业建账前应考虑什么
  • 小规模纳税人转为一般纳税人的流程
  • ubuntu系统怎么更新
  • ubuntu20.04
  • mac安装mysql详细教程
  • 电脑界面显示windows
  • desl.exe是什么
  • xp系统远程桌面怎么设置
  • win8.1开机进入桌面
  • uup windows
  • winbox app
  • 删除rpm安装包
  • 表格指定高度是多少
  • 在unity中单例的主要作用
  • mybatis框架执行流程
  • 游戏unity错误
  • 安卓开源组件
  • python计算π值
  • 税务局属于什么行业类别
  • 国家税务总局惠州仲恺高新技术产业开发区税务局
  • 税控盘税务数字证书密码忘记怎么办
  • 怎样查税务师事务所信息
  • 拆迁补偿的房子是什么性质
  • 电子税务局网页版
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设