首页 > 其他分享 >vue 请求拦截器 的响应拦截器有几种?

vue 请求拦截器 的响应拦截器有几种?

时间:2024-05-25 23:31:11浏览次数:27  
标签:拦截器 get vue 响应 token axios Session error

解决方案1:使用axios的请求拦截器 

import axios from 'axios';
 
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    config.headers!['Authorization'] = `${Session.get('token')}`;
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

解决方案2:使用fetch的AbortController

let controller = new AbortController();
let signal = controller.signal;
 
fetch('https://example.com', {
  signal,
  headers: {
    'Authorization': `${Session.get('token')}`
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.log('Fetch error:', error));

解决方案3:使用jQuery的ajaxSetup

$.ajaxSetup({
    headers: {
        'Authorization': Session.get('token')
    }
});
 
$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});

以上代码只是示例,具体实现可能需要根据你的项目环境和需求进行调整。例如,Session.get('token')可能需要根据你的状态管理库进行修改。

另外,如果你使用的是Node.js,你可能需要使用如node-fetch或axios这样的库来发送HTTP请求。

标签:拦截器,get,vue,响应,token,axios,Session,error
From: https://blog.csdn.net/woliuhuaqiangla/article/details/139205371

相关文章

  • 【vue与iframe通讯】
    vue与iframe通讯发送数据vue向iframe发送数据iframe向vue发送数据接收信息(vue&iframe通用)实现相互通讯通讯流程图实现代码vue页面iframe页面`iframe`内部重定向访问地址,更新`vue`路由代码下载前言:vue嵌套iframe实现步骤发送数据vue向iframe......
  • Windows安全应急--在应急响应中需要知道的信息
    在网络安全事件发生后,一般是要去客户现场排查问题的,那么要想解决问题,信息的完整性决定了这次任务的成败。。1.你需要知道的:先让客户梳理一遍事情的起因经过结果询问客户需要解决的问题了解客户的网络环境(有拓扑图最好了)了解系统环境(比如Linux系统还是Windows系统......
  • 网络安全事件应急响应
    描述:X集团的WebServer服务器遭到黑客入侵,该服务器的Web应用系统被上传恶意软件,系统文件被恶意软件破坏,您的团队需要帮助该公司追踪此网络攻击的来源,在服务器上进行全面的检查,包括日志信息、进程信息、系统文件和恶意文件等。通过分析黑客的攻击行为,我们将发现系统中的漏洞,并对其......
  • Django+Vue构建前后端分离开发模式
    将Django作为后端,Vue作为前端进行前后端分离开发是一个常见的模式。下面是一个完整的步骤,以构建一个Django和Vue整合的项目。1.准备Django后端安装必要的库确保你已经安装了Django和DjangoRESTframework:pipinstalldjangodjangorestframework配置Django项目在myproj......
  • Vue3实战笔记(43)—Vue3组合式API下封装可复用ECharts图表组件
    文章目录前言一、封装echart图标钩子二、使用步骤总结前言接上文,已经安装好了ECharts,开始封装组件方便使用。一、封装echart图标钩子首先应用我们之前学习的钩子方式,在hooks目录下创建一个名为useECharts.js的文件,用于封装ECharts的逻辑:import{ref,onMo......
  • Vue 3指令与事件处理
    title:Vue3指令与事件处理date:2024/5/2518:53:37updated:2024/5/2518:53:37categories:前端开发tags:Vue3基础指令详解事件处理高级事件实战案例最佳实践性能优化第1章Vue3基础1.1Vue3简介Vue3是一个由尤雨溪(尤大)领导的开源JavaScript框架,它专......
  • Vue3实战笔记(40)—组件逻辑复用:自定义Hooks的完全指南
    文章目录前言一、状态管理二、副作用处理三、生命周期钩子总结前言自定义Hooks是Vue3中的一个重要特性,它允许您创建可重用的函数,以便在组件之间共享状态和逻辑。以下是一些关于自定义Hooks的常见用法。一、状态管理使用reactive或ref来创建响应式数据,并在组件中......
  • vue的生命周期
    Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染、更新、卸载等一系列过程。Vue提供了一系列生命周期钩子(或称为生命周期方法),允许我们在不同阶段添加自己的代码。以下是Vue组件的主要生命周期钩子:1.**创建阶段(Creation):**  -`be......
  • vue指令
    内容渲染指令v-html 指令用于将包含HTML代码的字符串作为HTML插入到元素中,从而实现动态渲染HTML内容。条件渲染指令v-show和v-if区别及其使用场景v-show1.作用:控制元素显示隐藏2.语法:v-show="表达式"表达式值true显示,false隐藏3.原理:切换display:none控......
  • Vue3——Pinia+Pinia持久化
    Pinia安装Pinianpminstallpinia创建一个pinia实例(根store)并将其传递给应用//store/index.ts//仓库大仓库import{createPinia}from"pinia";//创建大仓库constpinia=createPinia();//对外暴露:入口文件需要安装仓库exportdefaultpinia;//mai......