vue拦截器的使用（萌新怕不懂的看过来）

最新推荐文章于 2024-08-19 11:35:22 发布
最新推荐文章于 2024-08-19 11:35:22 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： vue学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41033048/article/details/106278984
版权
本文详细记录了一位新手如何克服恐惧，逐步理解并应用Vue拦截器的过程。内容包括五个关键文件的作用和配置步骤，以及在main.js、api.js和index.vue中如何使用拦截器进行接口处理和统一管理。
摘要由CSDN通过智能技术生成

由于我是第一次使用这个东西，我看到拦截器这个高大上的名字就感觉到害怕，所以做了这么多项目也怕接触这个东西，现在想到接口要进行处理，并且集中放置，所以利用了最近刚学的番茄时钟工作法，开了一个番茄，告诉自己就弄这么一会就好了。好吧，硬着头皮上，慢慢地，耐心地终于看出了点眉目。记录一下方便大家。

第一步：这里总共有5个文件

在这里插入图片描述
第一个是引用位置
第二个是拦截器的内容放置位置
第三个是所有api请求集中放置的位置
第四个是vue引入外部js的位置
第五个是config目录下处理跨域请求的位置

第二步：正题如下

（1）http.js的文件内容：

/*
 * @Author: your name
 * @Date: 2020-05-21 18:29:06
 * @LastEditTime: 2020-05-22 14:14:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \banzou\static\js\http.js
 */
import axios from 'axios';

// axios 配置
var instance = axios.create({
    headers: {
        '
最低0.47元/天 解锁文章
叶川飞流
关注
专栏目录
vue拦截器
阳光下的冷静的博客
08-15 810
拦截器的目的 当我们需要统一处理http请求和响应(Vue项目中，通常是axios请求)，这时设置拦截器，对请求和响应做封装处理 拦截器设置 如下代码： import axios from 'axios' import { Message } from 'hui' import { trimOnlySpace } from '@hui-pro/utils' import { REQUEST_SUC...
Vue 拦截器原理和详细使用
路虽远行则将至，事虽难做则必成。
11-28 9251
了解request.js作用， 快速编写基础的代码，了解其原理，根据不同的需求，书写相应的代码。
vue 拦截器
最新发布
xjdkxnhcoskxbco的博客
08-19 288
if (config.method === "post" || config.method === "put"): 这个条件检查请求的方法是否是 POST 或 PUT。Axios.interceptors.request.use()来拦截所有的请求，对请求做相应护理后再放行搭配后端，这也是全局的，每个请求中无需自己处理。目的: 这个拦截器在 POST 和 PUT 请求时，将请求数据转换为 URL 编码的字符串格式，这是如果服务器期望这种格式的数据时非常有用的。第二个函数 处理请求配置过程中的任何错误。
Vue 拦截器的使用
zhang-JS的博客
05-06 1705
1、使用场景 每次都要在请求中加入，token ，判断是否有登陆，如果vue系统中，所有的请求都加入token，比较麻烦，每次发送求加入，不过vue给我们 提供了一种方法， -----拦截器 （请求拦截器/响应拦截器） 拦截器在平时的项目中是较常使用的,可以说一个项目里必不可少。 2、配置和使用 以下是我一次项目中拦截器的写法 // 引入axios import axios from 'axios' // 添加请求拦截器 axios.interceptors.request.use(function (c
vue-resource 拦截器（interceptor）的使用
Lucky_LXG的博客
04-27 1万+
拦截器-interceptor           在现代的一些前端框架上，拦截器基本上是很基础但很重要的一环，比如Angular原生就支持拦截器配置，VUE的Axios模块也给我们提供了拦截器配置，那么拦截器到底是什么，它有什么用？      拦截器能帮助我们解决的 添加统一的request的参数  比如header中加入X-Requested-With，比如客户端需要实现s
vue-拦截器的使用
u013008898的博客
01-25 746
cnpm install axios --save-dev <template> <div class="about"> <h1>vue中axios中拦截器的使用</h1> <button @click="handleClick">按钮</button> <div v-if="loading">loading...</div> <p v-else>{{ tit.
vue框架使用
qq_45645848的博客
01-11 1175
前端vue基础知识总结，汇总
一看就懂！Springboot+Vue实现自己谷歌验证码生成器
大誌的博客
04-02 3838
谷歌验证码这东西就相当于银行的“电子动态口令”密码器：通过用户名与密码登录手机银行后，付款、转账时则要用到动态口令。不过银行的动态口令卡往往是个硬件实体，而谷歌身份验证器是个手机app 玩游戏的朋友也不陌生，许多网游需要二步验证：登录游戏后可以进行普通的游戏操作，但打开仓库、买卖道具时，就要用到它的专用的二步验证app。 核心就是一个谷歌开源的算法，外面公司采用这个算法计算出验证码，而你也需要利...
vue使用mammoth案例_Vue中使用matomo进行访问流量统计的实现
weixin_33245246的博客
12-23 932
之前做到了一个页面及接口访问流量统计的需求, 然后在网上找了很多帖子,发现有些有的但是写的都不是很详细,所以今天就整理了一下正文第一步首先自然是引入matomonpm i vue-matomo第二步在main.js中注册一下matomoimport VueMatomo from 'vue-matomo'Vue.use(VueMatomo, {host: 'http://matomo.na.xyz'...
vue-resource 拦截器（interceptor）的使用详解
08-30
本篇文章主要介绍了vue-resource 拦截器（interceptor）的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue怎么让接口带上cookie_在Vue中如何使用Cookie操作实例
weixin_39793420的博客
12-19 1352
大家好，由于公司忙着赶项目，导致有段时间没有发布新文章了。今天我想跟大家谈谈Cookie的使用。同样，这个Cookie的使用方法是我从公司的项目中抽出来的，为了能让大家看懂，我会尽量写详细点。废话少说，我们直接进入正题。一、安装Cookie在Vue2.0下，这个貌似已经不需要安装了。因为当你创建一个项目的时候，npm install 已经为我们安装好了。我的安装方式如下：# 全局安装 vue-cl...
Vue中拦截器的使用
guoguo_love521的博客
11-23 2008
一. 背景 axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中，基本有一下几个特征 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSR 二. 场景 每一次的请求中都要加入token,判断是否登录，如...
vue 拦截器使用
热门推荐
逆风的蔷薇
03-26 1万+
一，背景， axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSR 二，场景 每次都要在请求中加入，toke...
VUE的拦截器
w17624003437的博客
08-22 9869
简单来说 vue 的拦截器 分为 请求拦截器 和 响应拦截器两种，使用场景的话就是： 每次都要在请求中加入，token 判断是否登录，如果vue系统中 所有的请求都加入token，比较麻烦，每次送出请求，不过vue给我们 提供了一种方法 ---- 拦截器拦截器在平时的项目中是比较使用频繁的 可以说在一个项目中 必不可少的。
vue的拦截器和响应器的使用
zmyalh的博客
12-14 2882
1、请求拦截器 请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么，例如加入token ....... return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); })
vue拦截器的作用及使用
05-30
Vue拦截器是一种用于在请求发送和响应返回时拦截处理的机制，它可以在请求发送前或响应返回后对请求或响应进行修改或处理。Vue拦截器通常用于添加全局的请求头、错误处理、鉴权等场景。 Vue拦截器可以通过`axios.interceptors`访问到，它提供了`request`拦截器和`response`拦截器两种类型。`request`拦截器可以在请求被发送出去之前对请求进行修改，`response`拦截器可以在响应返回到应用之前对响应进行修改。 以下是一个示例： ```javascript import axios from 'axios'; // 添加请求拦截器 axios.interceptors.request.use(config => { // 在发送请求之前做些什么，如添加请求头、loading等 return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(response => { // 对响应数据做些什么 return response; }, error => { // 对响应错误做些什么 return Promise.reject(error); }); ``` 在上面的示例中，我们通过`axios.interceptors.request.use`添加了一个请求拦截器，通过`axios.interceptors.response.use`添加了一个响应拦截器。在拦截器中，我们可以对请求或响应进行修改或处理，并将其返回。如果需要终止请求或响应，可以返回一个`Promise.reject`。 使用Vue拦截器可以方便地实现全局的请求头、错误处理、鉴权等功能。同时，也可以针对不同的请求添加不同的拦截器进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值