【vue2】axios请求与axios拦截器的使用详解

news2025/7/9 12:09:05

1d43f75f092a4050a8ce31e2d85f6868.gif

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

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

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

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


目录

一、axios

1.1axios的请求方式

1.2请求方式的传参特点

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

二、axios拦截器

2.1axios拦截器介绍

2.2axios拦截器使用

2.3总结axios拦截器


一、axios

1.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下来我们进行应用即可呦)

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拦截器

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

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

——期待大家的关注与支持! 你的肯定是我更新的最大动力——

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406411.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SAP ABAP——SAP简介(三)【S/4 HANA前端显示界面】

&#x1f482;作者简介&#xff1a; Thunder Wang&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学在读&#xff0c;同时任汉硕云&#xff08;广东&#xff09;科技有限公司ABAP开发顾问。在学习工作中&#xff0c;我通常使用偏后端的开发语言AB…

Ubuntu18.04安装Nvidia驱动【全网不坑,超全步骤】(亲测~)

Ubuntu18.04安装Nvidia驱动【全网不坑&#xff0c;超全步骤】亲测&#xff5e;为了方便以后回忆以及给像我一样的菜鸡提供思路&#xff0c;给出具体的步骤&#xff1a;No.1 查看自己的电脑显卡型号&#xff08;已知麻烦自动略过&#xff09;No.2 下载电脑对应的Nvidia版本驱动N…

Vue脚手架报错:‘v-model‘ directives require no argument 解决方案

1、报错&#xff1a; v-model directives require no argument 截图 2、原因&#xff1a; ESLint对vetur进行了eslint检查 3、解决方法 ① 修改模板中使用v-show 将 v-model:show"show" 改为 v-model"show" ② vetur插件的作者给出了解决办法 我们可…

【一起学Rust | 框架篇 | Viz框架】轻量级 Web 框架——Viz

文章目录前言特点一、Hello Viz1. 创建项目2. 引入viz3. 运行Hello Viz4. 运行结果注意二、Hello Viz代码详解导入组件处理请求主函数三、常见用法简单的处理程序实现处理程序特质路由传参链式组合程序中间件参数接收器路由一个简单的路由CRUD操作资源总结前言 Viz&#xff0c…

TS的类型声明

目录 1.TS把JS变成了静态类型的语言&#xff0c;可以给变量指定类型 2.JS中的函数是不考虑参数的类型和个数的&#xff0c;但是TS会考虑函数的参数类型和个数&#xff0c;且要规定返回值类型。 3.常见的TS类型 1.可以直接使用字面量进行类型声明 字面量声明的应用:可以使用…

讲解HTML和CSS(超详细)

讲解HTML和CSS&#xff08;超详细&#xff09;一、初始HTML和CSS1.html的发展历史2.html3.css二、HTML1.基本框架2.HTML5常用的标签和属性三、CSS1.css的使用2.css选择器总结提示&#xff1a;以下是我的一些经验之谈&#xff0c;下面案例可供参考 一、初始HTML和CSS 1.html的…

手撕前端面试题【javascript~ 总成绩排名、子字符串频次统计、继承、判断斐波那契数组等】

前端JavaScript面试题&#x1f353;&#x1f353;总成绩排名&#x1f353;&#x1f353;子字符串频次&#x1f353;&#x1f353;继承&#x1f353;&#x1f353;判断斐波那契数组&#x1f353;&#x1f353;js中哪些操作会造成内存泄漏?html页面的骨架&#xff0c;相当于人的…

Vue中的过滤器(filter)

一、Vue中的过滤器是什么 过滤器&#xff08;filter&#xff09;是输送介质管道上不可缺少的一种装置,大白话&#xff0c;就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据&#xff0c;只是对数据进行加工处理后返回过滤后的数据再进行调用处理&#xff0c;我们也可以理…

Java利用fastjson解析复杂嵌套json字符串、json数组;json字符串转Java对象,json数组转list数组

文章目录前言一、什么是JSON对象&#xff1f;二、什么是json字符串&#xff1f;二、什么是JSON数组&#xff1f;三、复杂、嵌套的json字符串四、json字符串转换4.1 简单json字符串转换为java对象4.2 简单json字符串数组转换为list数组4.3 复杂嵌套json字符串数组转换为Java对象…

十大常用web前端UI组件库,赶紧收藏

今天主要介绍web前端常用的UI库&#xff0c;这些网站基本都是背靠互联网大厂&#xff0c;值得web前端开发者收藏&#xff0c;当然还是要多多学习使用。 Vant 一款有赞出品轻量、可靠的的移动UI组件库&#xff0c;目前支持 Vue2、Vue3、React&#xff0c;微信和支付宝小程序&a…

Vue基础语法知识(自用,完整版)

Vue基础语法知识 1、想让Vue工作&#xff0c;就必须创建一个Vue实例&#xff0c;且要传入一个配置对象 2、root容器里的代码依然符合html规范&#xff0c;只不过混入了一些特殊的Vue语法 3、root容器中里的代码被称为【Vue模板】 4、Vue实例和容器是一一对应的 5、真实开发…

手机+PC电脑如何使用油猴插件和油猴脚本?

一、移动端使用油猴脚本 移动端可以不使用油猴插件&#xff0c;就可直接安装脚本&#xff08;需要浏览器支持&#xff09;&#xff0c;这样天然支持油猴脚本的移动浏览器还是很多&#xff0c;比如&#xff1a;书签地球、X浏览去、M浏览器等&#xff0c;但是各个浏览器的支持情…

前端Vue项目部署到服务器过程,以及踩坑记录

目录 需求 过程 踩坑 nginx服务器404错误的原因 404 Not Found nginx服务器500错误的原因 500 Internal Server Error nginx反向代理 需求 前后端完成项目后&#xff0c;需要部署到本地的服务器上。 第一次部署&#xff0c;以下是从0开始慢慢学着弄的详细过程 过程 …

大白话理解-微信小程序获取授权

学习目录 微信小程序前端直接获取授权微信为什么要授权微信怎么授权?微信登录微信小程序前端直接获取授权 微信为什么要授权 微信用户授权,才可以操作微信官方的某些接口。简单来说就是:微信定义了很多接口,然后他们认为有一部分是涉及到用户使用安全的,所以把这一部分划…

Python 爬虫案例

一、用cookie池模拟登录 在网络请求交互中&#xff0c;为了维持用户的登录状态&#xff0c;引入了cookie的概念。当用户第一次登录某个网站时&#xff0c;网站服务器会返回维持登录状态需要用到的信息&#xff0c;这些信息就称为cookie。浏览器会将cookie信息保存在本地计算机…

微信小程序(分包)

文章目录分包概念作用分包后的项目构成分包的加载规则分包的体积限制配置方法小程序打包原则引用原则独立分包分包预下载分包 概念 分包指的是把一个完整的小程序项目&#xff0c;按照需求划分为不同的子包&#xff0c;在构建时打包成不同的分包&#xff0c;用户在使用时按需…

解决报错:Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)

在做vue2项目时出现如下错误&#xff0c;页面空白且控制台出现如下错误&#xff1a; 报错内容&#xff1a; Uncaught TypeError: Cannot read properties of undefined (reading install) at Vue.use (vue.runtime.esm.js?c320:5709:1) at eval (index.js?5aa4:7:1…

Http请求-hutool工具类的使用

Http请求-hutool工具类的使用 前言 在日常java后端开发的工作中经常会遇到后端发起HTTP请求的情况&#xff0c;这里可以使用一个简单的工具类。 官方网址&#xff1a;Http请求-HttpRequest (hutool.cn) 介绍 本质上&#xff0c;HttpUtil中的get和post工具方法都是HttpRequ…

【小程序从0到1】首页布局案例的实现

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f6e0;目前正在学习的是&#x1f525;React/小程序React/小程序React/小程序&am…

let、const和var的区别(涉及块级作用域)

let 、const和var的区别 let、const、var在js中都是用于声明变量的&#xff0c;在没有进行ES6的学习前&#xff0c;我基本只会使用到var关键字进行变量的声明&#xff0c;但在了解了ES6之后就涉及到了块级作用域以及let&#xff0c;const了。 let与const let是用于替代var来…