【Axios】如何在Vue中使用Axios请求拦截器

news2025/2/26 6:11:35

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

🏆 作者简介:景天科技苑
🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。
🏆《博客》:Python全栈,Golang开发,云原生开发,前后端框架,PyQt5和Tkinter桌面开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi,flask等框架,云原生K8S集群搭建与管理,linux,shell脚本等实操经验,网站搭建,数据库等分享。

所属的专栏:前端零基础,实战进阶教学
景天的主页:景天科技苑

Vue中Axios拦截器

在Vue项目中,Axios是一个非常流行的HTTP客户端,用于发送请求和接收响应。Axios拦截器是Axios的一个强大功能,它允许你在请求发送之前和响应返回之后对请求和响应进行处理和拦截。通过拦截器,你可以添加请求头、处理请求参数、处理错误等。本文将结合实际案例,详细介绍如何在Vue中使用Axios拦截器。

一、安装Axios

首先,你需要在Vue3项目中安装Axios。你可以使用npm或yarn等包管理工具进行安装。

npm install axios

或者

yarn add axios

二、创建Axios实例

在Vue3项目中,通常会在项目的某个地方创建一个Axios实例,并对其进行配置。你可以将Axios实例放在一个单独的文件中,例如src/axios.js

// src/axios.js
import axios from 'axios';

// 创建Axios实例
const axiosInstance = axios.create({
  baseURL: '// 你的基础URL', // 设置请求的baseURL
  timeout: 5000, // 设置请求超时时间
});

// 导出Axios实例
export default axiosInstance;

在上面的代码中,我们使用axios.create方法创建了一个Axios实例,并传递了一些配置选项,例如baseURLtimeout

三、设置请求拦截器

请求拦截器允许你在请求发送之前对请求进行处理。你可以在Axios实例中使用interceptors.request.use方法来添加请求拦截器。

// src/axios.js
import axios from 'axios';

// 创建Axios实例
const axiosInstance = axios.create({
  baseURL: '// 你的基础URL',
  timeout: 5000,
});

// 添加请求拦截器
axiosInstance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    // 例如,添加请求头
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    
    // 处理请求参数
    // config.params = {
    //   ...config.params,
    //   key: 'value',
    // };

    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 导出Axios实例
export default axiosInstance;

在上面的代码中,我们添加了一个请求拦截器。在拦截器中,我们检查本地存储中是否存在token,如果存在,则将其添加到请求头中。你还可以对请求参数进行处理,例如添加或修改参数。

四、设置响应拦截器

响应拦截器允许你在响应返回之后对响应进行处理。你可以在Axios实例中使用interceptors.response.use方法来添加响应拦截器。

// src/axios.js
import axios from 'axios';

// 创建Axios实例
const axiosInstance = axios.create({
  baseURL: '// 你的基础URL',
  timeout: 5000,
});

// 添加请求拦截器(同上)

// 添加响应拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    // 例如,处理响应数据格式
    // response.data = {
    //   ...response.data,
    //   key: 'value',
    // };

    return response;
  },
  (error) => {
    // 对响应错误做些什么
    const { response } = error;
    if (response) {
      // 判断错误状态码
      if (response.status === 400) {
        // 请求错误
      } else if (response.status === 401) {
        // 未授权,请重新登录
      } else if (response.status === 403) {
        // 拒绝访问(403)
      }

      return Promise.reject(response.data);
    } else {
      console.error('网络连接异常,请稍后再试!');
    }
  }
);

// 导出Axios实例
export default axiosInstance;

在上面的代码中,我们添加了一个响应拦截器。在拦截器中,我们可以对响应数据进行处理,例如修改数据格式。我们还可以根据响应的状态码来处理不同的错误情况。

五、在Vue组件中使用Axios实例

现在,我们已经在项目中创建了Axios实例,并添加了请求和响应拦截器。接下来,我们可以在Vue组件中使用这个Axios实例来发送请求。

<!-- src/components/YourComponent.vue -->
<template>
  <div>数据展示</div>
</template>

<script>
import axiosInstance from '../axios';

export default {
  name: 'YourComponent',
  mounted() {
    axiosInstance.get('/your-endpoint')
      .then(data => {
        console.log(data);
      })
      .catch(error => {
        console.error('错误:', error);
      });
  },
};
</script>

在上面的代码中,我们在Vue组件的mounted生命周期钩子中使用了Axios实例来发送一个GET请求。请求成功后,我们将响应数据打印到控制台。如果请求失败,我们将错误信息打印到控制台。

六、封装请求方法

为了更方便地在项目中发送请求,我们可以将常用的请求方法封装起来。例如,我们可以封装GET和POST请求方法。

// src/api/axios.js
import axios from 'axios';

// 创建Axios实例(同上)

// 封装GET请求方法
export function getRequest(url, params = {}) {
  return axiosInstance.get(url, { params });
}

// 封装POST请求方法
export function postRequest(url, data = {}) {
  return axiosInstance.post(url, data);
}

现在,我们可以在Vue组件中使用封装好的请求方法来发送请求。

<!-- src/components/YourComponent.vue -->
<template>
  <div>数据展示</div>
</template>

<script>
import { getRequest, postRequest } from '../api/axios';

export default {
  name: 'YourComponent',
  mounted() {
    // 使用GET请求方法
    getRequest('/your-get-endpoint', { param1: 'value1' })
      .then(data => {
        console.log('GET请求响应:', data);
      })
      .catch(error => {
        console.error('GET请求错误:', error);
      });

    // 使用POST请求方法
    postRequest('/your-post-endpoint', { key: 'value' })
      .then(data => {
        console.log('POST请求响应:', data);
      })
      .catch(error => {
        console.error('POST请求错误:', error);
      });
  },
};
</script>

七、统一管理API接口

在项目中,我们可能会有很多API接口。为了方便管理和维护,我们可以将这些接口统一管理起来。例如,我们可以在src/api目录下创建一个api.js文件,并在其中定义所有的API接口。

// src/api/api.js
import { getRequest, postRequest } from './axios';

// 定义用户相关API接口
export class UserApi {
  static async login(params) {
    return postRequest('/login', params);
  }

  static async register(params) {
    return postRequest('/register', params);
  }

  static async getUserInfo(params) {
    return getRequest('/userInfo', params);
  }
}

// 定义书籍相关API接口
export class BookApi {
  static async getBookList(params) {
    return getRequest('/bookList', params);
  }
}

现在,我们可以在Vue组件中使用统一管理好的API接口来发送请求。

<!-- src/components/YourComponent.vue -->
<template>
  <div>
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
import { UserApi } from '../api/api';

export default {
  name: 'YourComponent',
  methods: {
    async handleLogin() {
      const params = {
        username: 'admin',
        password: '123456',
      };
      try {
        const response = await UserApi.login(params);
        console.log('登录成功:', response);
      } catch (error) {
        console.error('登录失败:', error);
      }
    },
  },
};
</script>

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

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

相关文章

w~深度学习~合集1

我自己的原文哦~ https://blog.51cto.com/whaosoft/12663254 #Motion Plan 代码 github.com/liangwq/robot_motion_planing 轨迹约束中的软硬约束 前面的几篇文章已经介绍了&#xff0c;轨迹约束的本质就是在做带约束的轨迹拟合。输入就是waypoint点list&#xff0c;约束…

大语言模型应用开发框架LangChain

大语言模型应用开发框架LangChain 一、LangChain项目介绍1、简介2、LangChain的价值3、实战演练 二、LangChain提示词大语言模型应用1、简介1.1、提示词模板化的优点1.2、提示词模板LLM 的应用1.3、Prompt 2、应用实战2.1、PromptTemplate LLM2.2、PromptTemplate LLM Outpu…

公众号文章标题的重要性

标题&#xff0c;不仅仅是一个简单的标题&#xff0c;它更是吸引读者眼球的“颜值担当”。 信息爆炸的今天&#xff0c;一个好的标题就是打开流量之门的金钥匙。那么&#xff0c;如何衡量一个标题的“颜值”呢&#xff1f;我们可以从两个维度来看&#xff1a;打开率和传播率。…

116. UE5 GAS RPG 实现击杀掉落战利品功能

这一篇&#xff0c;我们实现敌人被击败后&#xff0c;掉落战利品的功能。首先&#xff0c;我们将创建一个新的结构体&#xff0c;用于定义掉落体的内容&#xff0c;方便我们设置掉落物。然后&#xff0c;我们实现敌人死亡时的掉落函数&#xff0c;并在蓝图里实现对应的逻辑&…

ros2人脸检测

第一步&#xff1a; 首先在工作空间/src下创建数据结构目录service_interfaces ros2 pkg create service_interfaces --build-type ament_cmake 然后再创建一个srv目录 在里面创建FaceDetect.srv&#xff08;注意&#xff0c;首字母要大写&#xff09; sensor_msgs/Image …

Neo4j:图数据库使用入门

文章目录 一、Neo4j安装1、windows安装&#xff08;1&#xff09;准备环境&#xff08;2&#xff09;下载&#xff08;3&#xff09;解压&#xff08;4&#xff09;运行&#xff08;5&#xff09;基本使用 2、docker安装 二、CQL语句1、CQL简介2、CREATE 命令&#xff0c;创建节…

五.指派问题

匈牙利发求解指派问题找独立0元素&#xff0c;常用的步骤为&#xff1a;

如何利用AI生成专业级海报教程:解决中文嵌入问题的实战指南

AI生成专业级海报教程:解决中文嵌入问题的实战指南 一、前言:突破性进展 重大突破!字节即梦AI最新发布的v2.1绘图模型完美解决了中文文字嵌入问题。等待了整整两年,我们终于等到了这一天 —— AI可以直接在图片上完美呈现中文字体,审美和泛化能力都达到了惊人的水平。 二…

优质翻译在美国电子游戏推广中的作用

美国作为世界上最大的视频游戏市场之一&#xff0c;为寻求全球成功的游戏开发商提供了无与伦比的机会。然而&#xff0c;美国市场的文化和语言多样性使其成为一个复杂的导航景观。高质量的翻译在弥合开发者和这些充满活力的观众之间的差距方面发挥着关键作用&#xff0c;确保游…

嵌入式驱动开发详解4(内核定时器)

文章目录 前言通用定时器系统节拍节拍数与时间转换基本框架定时器使用代码展示通用定时器特点 高精度定时器 前言 LInux内核定时器是一种基于未来时间点的计时方式&#xff0c;以当前时刻来启动的时间点&#xff0c;以未来的某一时刻为终止点。比如&#xff0c;现在是10点5分&…

力扣-图论-3【算法学习day.53】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向和记录学习过程&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;&#xff09;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非…

2024年认证杯SPSSPRO杯数学建模D题(第一阶段)AI绘画带来的挑战解题全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 D题 AI绘画带来的挑战 原题再现&#xff1a; 2023 年开年&#xff0c;ChatGPT 作为一款聊天型AI工具&#xff0c;成为了超越疫情的热门词条&#xff1b;而在AI的另一个分支——绘图领域&#xff0c;一款名为Midjourney&#xff08;MJ&#xff…

各种常见生信格式文件的随机抽样

样本检验、随机生成数据、模拟用等&#xff0c;都需要从现有测序数据中随机抽样出一小部分数据来&#xff0c;按照自己需求。 0&#xff0c;最经典的方式&#xff1a; 使用awk等&#xff0c;只要了解各种数据格式具体的行列组成&#xff08;一般是headerrecord&#xff09;&a…

【技展云端,引擎蓝天】2025涡轮展之民用航空发动机技术分论坛及展览展示

2023年全球航空发动机市场规模约为1139.72亿美元&#xff0c;预计到2030年将达到1511.95亿美元&#xff0c;年均复合增长率为4.12%。这主要得益于全球航空运输需求的不断增长、新兴市场的快速扩张以及更高效、更环保的发动机技术创新。 航空发动机是一种高度复杂和精密的热力机…

【算法】——前缀和(矩阵区域和详解,文末附)

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 一&#xff1a;前缀和模版 二&#xff1a;前缀和模版2 三&#xff1a;寻找数组的中心下标 四&#x…

【kotlin 】内联类(value class / inline class)

官方文档&#xff1a;https://kotlinlang.org/docs/inline-classes.html 注&#xff1a;inline class 关键字已经被废弃&#xff0c;取而代之的是value class。现在使用内联类需要定义类为value class&#xff0c;并使用JvmInline注解进行标注。 一、使用场景 有时候&#xff…

【热门主题】000076 探索单片机的奥秘:原理、编程与应用全解析

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【热…

泷羽sec学习打卡-shell命令9

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都 与本人无关,切莫逾越法律红线,否则后果自负 关于shell的那些事儿-shell完结 方法一方法二重定向示例1示例2示例3 文件描述符例1例2 实践是检验真理的…

【Java】Scanner类的使用

Scanner类&#xff1a;从输入源&#xff08;键盘&#xff09;读取数据&#xff08;Java自己已经写好的一个类&#xff09; 使用&#xff1a; 1.导入Scanner类&#xff1a;import java.util.Scanner;&#xff08;为使用Scanner类做准备&#xff09; 2.创建Scanner类的对象&am…

摩尔线程 国产显卡 MUSA 并行编程 学习笔记-2024/12/04

Learning Roadmap&#xff1a; Section 1: Intro to Parallel Programming & MUSA Deep Learning Ecosystem&#xff08;摩尔线程 国产显卡 MUSA 并行编程 学习笔记-2024/11/30-CSDN博客&#xff09;UbuntuDriverToolkitcondapytorchtorch_musa环境安装(2024/11/24-Ubunt…