axios请求拦截器和响应拦截器
axios里面可以设置拦截器 ,在请求发送之前做一些事情;
拦截器分【请求拦截器】和【响应拦截器】
参考地址:https://www.jb51.net/article/150014.htm
参考的地址:https://www.jianshu.com/p/7bc7654d4574
请求拦截器的实际应用场景
在进行鉴权的时候;我们每个接口都需要携带token;
难道每次我们都需要手动拼接token;
这个时候拦截器就很有用了;
这时候就可以用拦截器来使token自动增加
// 首先我们看下请求拦截器的写法;在请求或响应被 then 或 catch 处理前拦截它们。
axios.interceptors.request.use((config)=>{
console.log("--",config);
config.baseURL="https://193.121.12.121:8999/";
if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.myAuthorization = mytoken;
// config.headers['Authorization'] = token;
}
if(!config.hasOwnProperty('showError')){
config.showError = true
}
return config;
},(err)=>{
console.log(error)
// 发生错误做的一些事情
return Promise.reject(error);
})
// 添加响应拦截器
axios.interceptors.response.use(function (res) {
// 对响应数据做点什么
if (res&&res.data&&res.data.success) {
return res.data
}else{
if(res.config.showError) {
//如何请求失败,开启了错误提示;进行提示
window.$toast(res.data.msg)
}
return Promise.reject(res.data)
}}, function (error) {
// 对响应错误做点什么;没有权限401,去登录界面
if(error.response.status === 401) {
window.$toast('登录超时')
setTimeout(() => {
uni.switchTab({
url: '/pages/home/home'
})
},1000)
}else if(error.response.status === 403) {
window.$toast('暂无权限')
}else {
window.$toast('网络错误')
}
return Promise.reject(error);
});
export default axios
使用
import request from './common'
/**
{请求参数} data
@param {
showError: 是否隐藏错误提醒
} utils
*/
export function getUserInfo(data, utils) {
return request({
url: 'xxx/xx/user',
method: 'get',
data,
...utils
})
}
axios请求拦截器和响应拦截器的更多相关文章
- vue配置请求拦截器和响应拦截器
首先确保我们已经设置的store.js进行值的存取,这时候我们需要配置请求和响应的拦截器设置 main.js import Vue from 'vue' import App from './App' ...
- axios请求响应拦截器的应用
什么是axios拦截器? 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器在请求发送前进行必要操作处理 例如添加统一cookie.请求体加验证.设置请求头 ...
- axios请求、返回拦截器
1.http 请求拦截器 axios.interceptors.request.use(function(config){ //在发送请求之前做些什么 return config }), functi ...
- vue axios请求/响应拦截器
// main.js中配置 // 引入 axios import Axios from 'axios' // 这时候如果在其它的组件中,是无法使用 axios 命令的. // 但如果将 axios 改 ...
- axios请求,拦截器的使用
1. axios 创建请求 import axios from 'axios' import {Message} from 'element-ui' import router from " ...
- 学习axios必知必会(2)~axios基本使用、使用axios前必知细节、axios和实例对象区别、拦截器、取消请求
一.axios的基本使用: ✿ 使用axios前必知细节: 1.axios 函数对象(可以作为axios(config)函数使用去发送请求,也可以作为对象调用方法axios.request(confi ...
- 【转】AngularJs HTTP请求响应拦截器
任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途 ...
- axios设置请求拦截和响应拦截
首先我们先创建axios实例 const service = axios.create({ baseURL: url, //是用于请求的服务器 URL timeout: 5000, // 请求超时时间 ...
- Vue axios封装 实现请求响应拦截
封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constru ...
- 前端快闪四: 拦截axios请求和响应
马甲哥继续在同程艺龙写一点大前端: 今天我们来了解一下 如何拦截axios请求/响应? axios是一个基于 promise 的网络请求库,可以用于浏览器和 node.js, promise 类似于C ...
随机推荐
- 使用wxpython开发跨平台桌面应用,设计系统的登录界面
一般的系统登统界面,设计好看一些,系统会增色不少,而常规的桌面程序,包括Web上的很多界面,都借助于背景图片的效果来增色添彩,本篇随笔介绍基于WxPython来做一个登录界面效果,并对系统登录界面在不 ...
- 一键生成美观的彩页演示+AI的训练过程科普
一键生成美观彩页 + AI训练揭秘:让你的内容瞬间高大上! 阅读时间: 8分钟 | 字数: 1300+ 你是否曾为制作精美的演示文稿而烦恼?是否对AI的训练过程充满好奇?今天,让我们一起探索如何用AI ...
- vue-element-admin 左侧的导航栏固定展开
项目需要把左侧的导航栏固定打开,不关闭我们只需要打开store-modules-app.js文件中,把下面的代码给修改就可以了
- JVM调优总结:典型配置举例
原文出处:http://developer.51cto.com/art/201201/311739.htm 一篇非常棒的关于JVM性能调优的文章,转载用于自己经常查阅 以下配置主要针对分代垃圾回收算法 ...
- JS之Date时间处理
初始化当前时间: // 1. 使用构造函数方式 var newDate = new Date() // 2. 使用函数方式 var date = Date() // 返回的是一个Date对象 cons ...
- 同步工具之Vector
官网: https://vector.dev/ 用于构建可观察性管道的轻量级.超快速工具 [安装] curl --proto '=https' --tlsv1.2 -sSf https://sh.ve ...
- Vim之PHP语法检查
在Linux下操作,一般都是使用vim进行文本编辑, 这个时候有可能不小心就会出现语法异常,导致程序错误 手动检查: 1) 编辑完成之后, 回到命令行下执行 php -l test.php 如果语法校 ...
- pycharm之激活
激活相关文件: https://github.com/lanlangdeai/develop-kit/tree/master/software/editor/pycharm 一. 激活码激活 步骤: ...
- 理解Flink之二Window与Watermark
Flnk作为流式计算平台,他能对源源不断发送过来的数据进行处理. 对于数据流的处理方式,可以是来一条处理一条(pipeline的方式),还可以获取一些数据然后统一处理. 对于数据流如何描述一堆数据呢? ...
- seldom-platform颠覆传统的自动化测试平台
1. 传统的自动化测试平台 近些年,中等以上规模的公司测试团队都在建设自己的自动化测试平台.主要要以 HTTP接口测试 和 性能测试 为主:一些平台还支持 Web UI测试和App UI测试等,试图通 ...