vue项目 Axios创建拦截器

Axios

    • 1. Axios 和 Ajax 简介
    • 2. Axios 和 Ajax 的区别
    • 3. 从 按钮 到 Axios请求后端接口的 大致顺序

1. Axios 和 Ajax 简介

Ajax(Asynchronous JavaScript and XML) 不是一种技术,而是一个编程技术概念,核心是通过 XMLHttpRequest 对象实现异步通信。

Axios 是一个独立的库,它既在浏览器环境中使用了 XMLHttpRequest,又在服务端使用 原生node.js http 模块。

2. Axios 和 Ajax 的区别

特性原生 Ajax(XMLHttpRequest)Axios
使用方式需要手动创建 和 管理 XMLHttpRequest 对象提供简洁的 API,如 axios.get()axios.post()
异步处理使用回调函数基于 Promise,支持 async/await
功能扩展功能有限,需手动实现内置拦截器、请求取消、自动转换 JSON 等功能
跨平台支持仅限浏览器支持浏览器和 Node.js

3. 从 按钮 到 Axios请求后端接口的 大致顺序

  1. 点击按钮
    点击按钮时,触发 @click 点击事件,就到了 login 函数。

    在这里插入图片描述

    <!-- 登录按钮 -->
    <el-form-item><el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
    </el-form-item>
    
  2. login里请求接口的函数,写在了 user.js 文件中
    Login.vue

    示例代码

    import { userLoginService } from '@/api/user.js'
    import { ElMessage } from 'element-plus'//导入路由 router
    import {useRouter} from 'vue-router'
    const router = useRouter();//导入 有Pinia函数的token.js文件
    import { useTokenStore } from '@/stores/token'
    const tokenStore = useTokenStore();//登录函数 login
    const login = async () => {//调用接口,完成登录let result = await userLoginService(registerData.value);//alert(result.msg ? result.msg : '登录成功');ElMessage.success(result.msg ? result.mag : '登录成功');//把得到的token存储到pinia中tokenStore.setToken(result.data);//跳转到首页,使用useRouter切换组件,完成跳转router.push('/');
    }
    
  3. user.js 里的请求,都统一用 request.js 请求工具来完成
    在这里插入图片描述
    示例代码

    //导入request.js请求工具
    import request from '@/utils/request.js'//提供调用主次接口的函数
    export const userRegisterService = (registerData) => {//借助于UrlSearchParams完成传递const params = new URLSearchParams();for (let key in registerData) {params.append(key, registerData[key]);}return request.post('/user/register', params);
    }export const userLoginService = (loginData) => {const params = new URLSearchParams();for (let key in loginData) {params.append(key, loginData[key])}return request.post('/user/login', params);
    }
    
  4. 在请求工具 request.js 里,导入了Axios,并创建了请求拦截器响应拦截器
    有了拦截器,就可以在 请求服务前得到响应后 统一处理数据。
    在这里插入图片描述

    示例代码:

    //这里边相当于请求的工具,用来定制请求的实例//导入axios: npm install axios
    import axios from 'axios';//导入Message消息提示
    import { ElMessage } from 'element-plus';//定义一个变量,记录公共的前缀,baseURL
    // const baseURL = 'http://localhost:8080';
    // 这里的'/api'只是给后台访问的请求路径添加一个标识
    const baseURL = '/api';/*  axios.create()方法,把baseURL作为参数传入,该方法返回一个请求的实例instance,以后发送请求时,就不用axios.get了,直接用instance.get就可以 */
    const instance = axios.create({ baseURL })/* axios提供的拦截器,在请求或响应,被then或catch处理前拦截也就是在请求发出之前,有一个请求拦截器或在响应到达之前,有一个响应拦截器 *///导入Pinia
    import { useTokenStore } from '@/stores/token';
    //添加请求拦截器
    instance.interceptors.request.use((config) => {//请求前的回调const tokenStore = useTokenStore();//在pinia中定义的响应式数据,都不需要.valueif (tokenStore.token) {config.headers.Authorization = tokenStore.token;}return config},(err) => {//请求错误的回调Promise.reject(err);}
    )/* 由于模块加载的顺序,不能这样导入import { useRoute } from 'vue-router';const router = useRoute(); 
    */
    //这样导入就能用了
    import router from '@/router'//添加响应拦截器(这个拦截器本身就是异步的)
    instance.interceptors.response.use(//成功的回调result => {//判断业务状态码if (result.data.code === 0) {return result.data;}//操作失败ElMessage.error(result.data.msg ? result.data.msg : '服务异常');//异步操作的状态转换为失败return Promise.reject(result.data);},//失败的回调err => {//判断响应状态码,若为401,则说明未登录,提示请登录,并跳转到登录页面if(err.response.status === 401){ElMessage.error('请先登录');router.push('/login');}else{ElMessage.error('服务异常');}//异步的状态转化成失败的状态return Promise.reject(err);}
    )//把请求的实例instance导出,供其他地方调用
    export default instance;
    

    上述代码中的 const baseURL = ‘/api’,在另一篇文章 vue处理跨域问题 里有详细描述。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows + visual studio 2019 使用cmake 编译构建静、动态库并调用详解

环境 windows visual studio 2019 visual studio 2019创建cmake工程 1. 静态库.lib 1.1 静态库编译生成 以下是我创建的cmake工程文件结构&#xff0c;只关注高亮文件夹部分 libout 存放编译生成的.lib文件libsrc 存放编译用的源代码和头文件CMakeLists.txt 此次编译CMak…

通过 VBA 在 Excel 中自动提取拼音首字母

在excel里面把表格里的中文提取拼音大写缩写怎么弄 在Excel中&#xff0c;如果你想提取表格中的中文字符并转换为拼音大写缩写&#xff08;即每个汉字的拼音首字母的大写形式&#xff09;&#xff0c;可以通过以下步骤来实现。这项工作可以分为两个主要部分&#xff1a; 提取拼…

通过环境变量实现多个 python 版本的自由切换以及 Conda 虚拟环境的使用教程

目录 Python 安装包的下载和安装通过环境变量的方式来切换不同的 Python 版本Pycharm 创建项目使用虚拟环境 使用虚拟环境管理工具 condaConda 教程1. **环境管理**创建虚拟环境激活虚拟环境退出虚拟环境列出所有虚拟环境删除虚拟环境导出虚拟环境配置从文件创建虚拟环境 2. **…

排序算法详解、应用对比与C语言实现

四种经典排序算法详解&#xff08;原理动图代码&#xff09; 一、排序算法的重要性 排序算法是计算机科学领域最基础的算法之一&#xff0c;在数据库索引、搜索引擎优化、大数据分析等领域有广泛应用。根据Stack Overflow 2022开发者调查&#xff0c;超过83%的面试会考察算法…

Python基于Django的微博热搜、微博舆论可视化系统(V3.0)【附源码】

博主介绍&#xff1a;✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&…

网络安全ids是什么意思

1、 简述IPS和IDS的异同点&#xff1b; 入侵检测系统&#xff08;IDS&#xff09; IDS&#xff08;Intrusion Detection Systems&#xff0c;入侵检测系统&#xff09;&#xff0c;专业上讲就是依照一定的安全策略&#xff0c;对网络、系统、运行状况进行监视&#xff0c;尽可能…

JVM春招快速学习指南

1.说在前面 在Java相关岗位的春/秋招面试过程中&#xff0c;JVM的学习是必不可少的。本文主要是通过《深入理解Java虚拟机》第三版来介绍JVM的学习路线和方法&#xff0c;并对没有过JVM基础的给出阅读和学习建议&#xff0c;尽可能更加快速高效的进行JVM的学习与秋招面试的备战…

json格式,curl命令,及轻量化处理工具

一. JSON格式 JSON&#xff08;JavaScript Object Notation&#xff09; 是一种轻量级的数据交换格式。它基于一个子集的JavaScript编程语言&#xff0c;使用人类易于阅读的文本格式来存储和表示数据。尽管名字中有“JavaScript”&#xff0c;但JSON是语言无关的&#xff0c;几…

echarts 3d中国地图飞行线

一、3D中国地图 1. 一定要使用 echarts 5.0及以上的版本; 2. echarts 5.0没有内置中国地图了。点击下载 china.json&#xff1b; 3. 一共使用了四层地图。 &#xff08;1&#xff09;第一层是中国地图各省细边框和展示南海诸岛&#xff1b; &#xff08;2&#xff09;第二层是…

从 0 开始本地部署 DeepSeek:详细步骤 + 避坑指南 + 构建可视化(安装在D盘)

个人主页&#xff1a;chian-ocean 前言&#xff1a; 随着人工智能技术的迅速发展&#xff0c;大语言模型在各个行业中得到了广泛应用。DeepSeek 作为一个新兴的 AI 公司&#xff0c;凭借其高效的 AI 模型和开源的优势&#xff0c;吸引了越来越多的开发者和企业关注。为了更好地…

[AI]Mac本地部署Deepseek R1模型 — — 保姆级教程

[AI]Mac本地部署DeepSeek R1模型 — — 保姆级教程 DeepSeek R1是中国AI初创公司深度求索&#xff08;DeepSeek&#xff09;推出大模型DeepSeek-R1。 作为一款开源模型&#xff0c;R1在数学、代码、自然语言推理等任务上的性能能够比肩OpenAI o1模型正式版&#xff0c;并采用MI…

Linux(socket网络编程)TCP连接

Linux&#xff08;socket网络编程&#xff09;TCP连接 基础文件目录函数系统进程控制函数fork()exec系列函数void abort(void)void assert(int expression)void exit(int status)void _exit(int status)int atexit(void (*func)(void))int on_exit(void (*function)(int,void*)…

408-数据结构

数据结构在学什么&#xff1f; 1.用代码把问题信息化 2.用计算机处理信息 ch1 数据&#xff1a;数据是信息的载体&#xff0c;是描述客观事物属性的数、字符及所有能输入到计算机中并被计算机程序识别和处理的符号的集合。数据是计算机程序加工的原料。 ch2 //假设线性表…

Go语言开发桌面应用基础框架(wails v3)-开箱即用框架

前言 本文是介绍如何集成好了Wails3开发框架以及提供视频教程&#xff0c;当你需要桌面开发时&#xff0c;直接下载我们基础框架代码&#xff0c;开箱即用不用配置开发需要依赖。 为什么使用v3版本&#xff0c;主要是v3新增的功能 ​支持多个窗口&#xff1a;在单个应用程序…

Git 与 Git常用命令

Git 是一个开源的分布式版本控制系统&#xff0c;广泛用于源代码管理。与传统的集中式版本控制系统不同&#xff0c;Git 允许每个开发者在本地拥有完整的代码库副本&#xff0c;支持离线工作和高效的分支管理。每次提交时&#xff0c;Git 会对当前项目的所有文件创建一个快照&a…

尚硅谷爬虫note004

一、urllib库 1. python自带&#xff0c;无需安装 # _*_ coding : utf-8 _*_ # Time : 2025/2/11 09:39 # Author : 20250206-里奥 # File : demo14_urllib # Project : PythonProject10-14#导入urllib.request import urllib.request#使用urllib获取百度首页源码 #1.定义一…

老WinForm中一个执行文件使用SQLite数据库

EF6在老WinForm中停止更新了&#xff0c;但如果只是在win10上面使用&#xff0c;老的.net Framework 4.8框架有一个优势&#xff0c;编译后的执行文件很小。还有一些老类库也只能在老的.net Framework 4.8框架使用&#xff0c;所以微软还是保留了老的.net Framework 4.8框架。 …

diff算法简析

diff算法的核心目的是用最少的步骤找出新旧节点的差异&#xff0c;从而更新视图。 diff算法是一种通过同层的树节点进行比较的高效算法&#xff0c;探讨的是虚拟DOM树发生变化后&#xff0c;生成DOM树更新补丁的方式。对比新旧两株虚拟DOM树的差异&#xff0c;将更新补丁作用于…

19.3 连接数据库

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 ​​​​​​​需要北风数据库的请留言自己的信箱。 连接数据库使用OleDbConnection&#xff08;数据连接&#xff09;类&#xff…

Redis实现分布式锁

一、使用分布式锁的背景是什么 1、如果你公司的业务&#xff0c;各个应用都只部署了一台机器&#xff0c;那么完全用不着分布式锁&#xff0c;直接使用Java的锁即可 2、可是当你们的业务量大&#xff0c;多台机器并发情况下争夺一个资源的时候&#xff0c;就必须要保证业务的…