-
Vue添加请求拦截器及vue-resource 拦截器使用
2020-08-28 18:22:47主要介绍了Vue添加请求拦截器及vue-resource 拦截器使用,需要的朋友可以参考下 -
Vue添加请求拦截器
2019-11-08 08:31:41一、现象 统一处理错误及配置请求信息 二、解决 1、安装 axios , 命令:npm install axios --save-dev 2、在根目录的config目录下新建文件axios....一、现象
统一处理错误及配置请求信息
二、解决
1、安装 axios , 命令: npm install axios --save-dev
2、在根目录的config目录下新建文件 axios.js ,内容如下:
import axios from 'axios'
// 配置默认的host,假如你的API host是:http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club'// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
});// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
});3、在main.js中进行引用,并配置一个别名($ajax)来进行调用:
import axios from 'axios'
import '../config/axios'Vue.prototype.$ajax = axios
如图:
4、应用,一个登录的post如:
this.$ajax({
method: 'post',
url: '/login',
data: {
'userName': 'xxx',
'password': 'xxx'
}
}).then(res => {
console.log(res)
})三、总结
统一处理方便
-
vue 无法进入response拦截器_Vue添加请求拦截器及vue-resource 拦截器使用
2020-12-22 15:37:21一、现象统一处理错误及配置请求信息二、解决1、安装 axios , 命令:npm install axios --save-dev2、在根目录的config目录下新建文件 axios.js ,内容如下:import axios from 'axios'// 配置默认的host,假如你的...一、现象
统一处理错误及配置请求信息
二、解决
1、安装 axios , 命令:npm install axios --save-dev
2、在根目录的config目录下新建文件 axios.js ,内容如下:
import axios from 'axios'
// 配置默认的host,假如你的API host是:http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
});
3、在main.js中进行引用,并配置一个别名($ajax)来进行调用:
import axios from 'axios'
import '../config/axios'
Vue.prototype.$ajax = axios
如图:
4、应用,一个登录的post如:
this.$ajax({
method: 'post',
url: '/login',
data: {
'userName': 'xxx',
'password': 'xxx'
}
}).then(res => {
console.log(res)
})
ps:下面看下vue-resource 拦截器使用
在vue项目使用vue-resource的过程中,临时增加了一个需求,需要在任何一个页面任何一次http请求,增加对token过期的判断,如果token已过期,需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断,那么会是一个非常大的修改工作量。那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢?答案是有的!
vue-resource的interceptors拦截器的作用正是解决此需求的妙方。在每次http的请求响应之后,如果设置了拦截器如下,会优先执行拦截器函数,获取响应体,然后才会决定是否把response返回给
then进行接收。那么我们可以在这个拦截器里边添加对响应状态码的判断,来决定是跳转到登录页面还是留在当前页面继续获取数据。
下边代码添加在main.js中
Vue.http.interceptors.push((request, next) => {
console.log(this)//此处this为请求所在页面的Vue实例
// modify request
request.method = 'POST';//在请求之前可以进行一些预处理和配置
// continue to next interceptor
next((response) => {//在响应之后传给then之前对response进行修改和逻辑判断。对于token时候已过期的判断,就添加在此处,页面中任何一次http请求都会先调用此处方法
response.body = '...';
return response;
});
});
在知道此方法之前,鄙人想了一个笨方法,但是也能在一定程度上降低修改工作量。方法是为Vue绑定一个this.$$http.get方法取代this.$http.get方法,每个页面的http请求添加个$在$http前即可。
// ajax.js
function plugin(Vue){
Object.defineProperties(Vue.prototype,{
$$http:{
get(){
return option(Vue);
}
}
})
}
function option(Vue){
let v = new Vue();
return {
get(a,b){
let promise = new Promise(function(reslove,reject){
v.$http.get(a,b).then((res)=>{
reslove(res)
},(err)=>{
//处理token过期问题。
})
})
return promise;
}
}
}
module.exports=plugin;
//main.js
import ajax from './ajax.js'
Vue.use(ajax)
总结
以上所述是小编给大家介绍的Vue添加请求拦截器及vue-resource 拦截器使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
-
vue 无法进入response拦截器_Vue添加请求拦截器
2020-12-22 15:36:43一、现象统一处理错误及配置请求信息二、解决1、安装 axios , 命令:npm install axios --save-dev2、在根目录的config目录下新建文件axios.js ,内容如下:import axios from 'axios'// 配置默认的host,假如你的API...一、现象
统一处理错误及配置请求信息
二、解决
1、安装 axios , 命令: npm install axios --save-dev
2、在根目录的config目录下新建文件 axios.js ,内容如下:
import axios from 'axios'
// 配置默认的host,假如你的API host是:http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
});
3、在main.js中进行引用,并配置一个别名($ajax)来进行调用:
import axios from 'axios'
import '../config/axios'
Vue.prototype.$ajax = axios
如图:
4、应用,一个登录的post如:
this.$ajax({
method: 'post',
url: '/login',
data: {
'userName': 'xxx',
'password': 'xxx'
}
}).then(res => {
console.log(res)
})
三、总结
统一处理方便
例:
使用iview框架,在main.js添加请求接口拦截器 loading
axios.interceptors.request.use(function (config) {
iView.LoadingBar.start()returnconfig
}),function (error) {
iView.LoadingBar.error()returnPromise.reject(error)
}
axios.interceptors.response.use(function (config) {
iView.LoadingBar.finish()returnconfig
}),function (error) {
iView.LoadingBar.error()returnPromise.reject(error)
}
/**
* @export
* @param {any} request
* @param {any} next
* @returns*/import storefrom './vuex/store'
//全局错误处理,全局loading
import { setLoading, setTip } from './vuex/actions/doc_actions'exportdefaultfunction (request, next) {if (request.tip !== false) {
setLoading(store,true)
}
next((res)=>{
setLoading(store,false)
let data=JSON.parse(res.data)if (res.status === 0) {
setTip(store, {
text:'网络不给力,请稍后再试'})
}if (!data.success) {
setTip(store, {
text: data.error_msg
})
}
})
}
-
vue添加全局拦截器
2019-02-20 11:00:33vue添加全局拦截器 为了统一处理错误及配置请求信息可以设置拦截器,本文是登录过期设置,过期后跳到登录页 安装 axios , 命令: npm install axios --save-dev 在根目录的config目录下新建文件 axios.js ,内容...vue添加全局拦截器
为了统一处理错误及配置请求信息可以设置拦截器,本文是登录过期设置,过期后跳到登录页
- 安装 axios , 命令: npm install axios --save-dev
- 在src目录的新建config文件夹,并在config目录下新建文件 axiosConfig.js ,内容如下
import axios from 'axios' import { Message } from 'element-ui'//引用elementui的信息提示框,根据个人选择可以不用 import Router from '../router' // Add a request interceptor axios.interceptors.request.use(function (config) { // Do something before request is sent return config }, function (error) { // Do something with request error Message.error({ message: '请求错误:' + error.message }) return Promise.reject(error) }) // Add a response interceptor axios.interceptors.response.use(function (response) { // console.log('response') // Do something with response data // console.log(response) //返回参数是noLogin时,返回首页 if (response.data.flag === 'noLogin') { Router.push('/') Message.error({ message: '当前会话过期' }) } return response }, function (error) { // Do something with response error let msg = error.message if (error.response.status === 401) { msg = '当前会话已过期。' Router.push('/') } Message.error({ message: '响应错误:' + msg }) return Promise.reject(error) }) export default axios
3、 在main.js中进行引用,并配置一个别名来进行调用
import Axios from '@/config/axiosConfig' Vue.prototype.$http = Axios
4、post请求格式
this.$http.post(url).then(res=>{ console.log(res) }).catch(res=>{ console.log(res) })
-
vue中为请求添加拦截器
2019-11-15 22:26:40vue 中想给所有的请求的headers中都添加一个token, 需要设置拦截器去添加, 在main.js中添加一下代码即可。 Vue.http.interceptors.push((request, next) => { if(!(request.url.indexOf('152.10.12.*') != -... -
Vue添加请求后端数据接口拦截器
2020-04-08 14:00:49我们在请求后端接口的时候会遇到授权问题,就是后端接口需要一个认证,这个认证会在每个接口里返回,同时请求是也要携带,这个时候vue 里的拦截器就很好的做了这一点,统一处理错误及配置请求信息; 处理方案: 1、... -
Vue通过axios请求拦截器添加token
2020-06-25 12:01:50简介 前后端分离的项目中,前端需要通过发送请求获取数据,为了安全,需要保证前端发送...axios中有 interceptors 属性,其中有 request 成员,就是一个请求拦截器 再通过 use 挂载一个回调函数,只要有请求通过 axi -
关于vue项目的请求拦截器和响应拦截器
2020-12-17 19:01:27使用axios// 添加请求拦截器 每个请求体里加上token axios.interceptors.request.use( function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return ... -
vue-axios 请求拦截器 Get 请求之添加请求头 Content-Type 无效
2020-07-30 17:03:47上一篇文章中写到如何配置 axios 请求拦截,但是遗留下一个令人非常困扰的问题。各种配置都没什么问题,可是请求一直过不去。例:get 请求报错如下 -> 王德发~~~~,这是什么鬼,不要慌张,让我们仔细看报错信息... -
vue 请求拦截器
2019-04-24 16:50:582.在utils文件夹下request.js中添加如下代码(以token过期,跳转至登录页为例) import axios from 'axios' import { Toast } from 'mint-ui' import router from '../router' const service... -
Vue http request 请求拦截器
2021-01-14 11:00:29// 添加http request 请求拦截器,有token值则配置上token值 axios.interceptors.request.use( config => { // 在发送请求之前做些什么 const token = Cookies.get("token") ? Cookies.get("token") : ""; ... -
vue中interceptors拦截器中添加的请求头被参数替换怎么办
2020-01-03 11:25:10本来是这样的,一开始的请求头  这个是浏览器url地址的的请求参数 ![图片说明]... -
http请求拦截器
2018-03-01 17:05:00Vue添加请求拦截器 一、现象 统一处理错误及配置请求信息 二、解决 1、安装 axios , 命令:npm install axios --save-dev 2、在根目录的config目录下新建文件axios.js ,内容如下: import axios from '... -
vue-resource拦截器
2017-11-24 14:55:23vue-resource拦截器 拦截器能做什么? - 过滤重复请求 - 添加loading动画 - 统一添加header - 统一处理异常信息 下面是一个简单的拦截器案例 import Vue from 'vue' import VueResource from 'vue-resource... -
vue项目之请求拦截器(接口响应之前默认给所有接口加上某些参数)
2021-02-23 17:11:30vue项目之请求拦截器(接口响应之前默认给所有接口加上某些参数) 一、在request.js中的请求拦截器里面添加如下代码 service.interceptors.request.use( config => { //请求之前需要添加参数的方法 requestMethod... -
vue项目axios拦截器
2019-08-06 16:02:26拦截器:发送或响应请求之前,做一些需要判断的事情,比如发送某些请求需要携带token,可在请求拦截器中配置token;...// 添加请求拦截器 axios.interceptors.request.use(function (config) { /... -
vue的axios拦截器使用
2019-05-21 10:27:50axios拦截器 下载并使用axios后可以对全局进行拦截器设置。...添加请求拦截器 //定义一个请求拦截器 axios.interceptors.request.use(function(config){ Vue.$vux.loading.show(); //在请求发出之前进行一些操作 r... -
vue项目中 axios请求拦截器与取消pending请求功能
2018-08-24 10:24:00在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过。 这里以axios请求为例 实现了设置统一请求头添加token, 其中token在登录时被存入... -
Vue拦截器vue-resource 使用详解
2019-07-05 15:43:13所谓拦截器,就是对一些文件进行拦截,本文主要介绍了Vue添加请求拦截器及vue-resource 拦截器使用,需要的朋友可以参考下,希望能帮助到大家。一、现象统一处理错误及配置请求信息二、解决1、安装 axios , 命令: ... -
vue-resource 拦截器使用详解
2020-12-09 06:50:21vue-resource的interceptors拦截器的作用正是解决此需求的妙方。在每次http的请求响应之后,如果设置了拦截器如下,会优先执行拦截器函数,获取响应体,然后才会决定是否把response返回给then进行接收。那么我们 -
VUE中get,post请求中添加拦截器
2020-11-21 16:19:05一.引入axios import axios from "axios"; //创建实例 const service = axios.create({ ...//添加请求拦截器 service.interceptors.request.use(function(config){ //在发送请求之前做些什么 config.h
-
Spring Boot 2.x基础教程:使用MongoDB
-
不同渠道权力结构和需求不确定下双渠道供应链的比较与复杂分析
-
是否开启NUMA
-
速帝世界总冠军大赛-源码
-
图形视图(02):【类】QGraphicsScene [官翻]
-
Webpack优化构建速度
-
Django View视图
-
MySQL 查询与高级查询(多表、嵌套和正则表达式)
-
summernote.rar
-
rtklib_demo_b34.rar
-
rango_customer-2-源码
-
php 多级分类获取父级id,做导航
-
java 获取请求的ip地址
-
Galera 高可用 MySQL 集群(PXC v5.6 + Ngin
-
robo_advisor-源码
-
【布道者】Linux极速入门
-
《文本处理 awk sed grep ”三剑客”》
-
社群运营的这6种裂变模型,你掌握了吗?
-
MySQL DML 语言(插入、更新与删除数据)
-
Unity RUST 逆向安全开发