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请求拦截器和响应拦截器的更多相关文章

  1. vue配置请求拦截器和响应拦截器

    首先确保我们已经设置的store.js进行值的存取,这时候我们需要配置请求和响应的拦截器设置 main.js import Vue from 'vue' import App from './App' ...

  2. axios请求响应拦截器的应用

    什么是axios拦截器? 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器在请求发送前进行必要操作处理 例如添加统一cookie.请求体加验证.设置请求头 ...

  3. axios请求、返回拦截器

    1.http 请求拦截器 axios.interceptors.request.use(function(config){ //在发送请求之前做些什么 return config }), functi ...

  4. vue axios请求/响应拦截器

    // main.js中配置 // 引入 axios import Axios from 'axios' // 这时候如果在其它的组件中,是无法使用 axios 命令的. // 但如果将 axios 改 ...

  5. axios请求,拦截器的使用

    1. axios 创建请求 import axios from 'axios' import {Message} from 'element-ui' import router from " ...

  6. 学习axios必知必会(2)~axios基本使用、使用axios前必知细节、axios和实例对象区别、拦截器、取消请求

    一.axios的基本使用: ✿ 使用axios前必知细节: 1.axios 函数对象(可以作为axios(config)函数使用去发送请求,也可以作为对象调用方法axios.request(confi ...

  7. 【转】AngularJs HTTP请求响应拦截器

    任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途 ...

  8. axios设置请求拦截和响应拦截

    首先我们先创建axios实例 const service = axios.create({ baseURL: url, //是用于请求的服务器 URL timeout: 5000, // 请求超时时间 ...

  9. Vue axios封装 实现请求响应拦截

    封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constru ...

  10. 前端快闪四: 拦截axios请求和响应

    马甲哥继续在同程艺龙写一点大前端: 今天我们来了解一下 如何拦截axios请求/响应? axios是一个基于 promise 的网络请求库,可以用于浏览器和 node.js, promise 类似于C ...

随机推荐

  1. DoH(DNS on HTTPS)和DoT(DNS on TLS)协议详解

    目录 目录 简介 详情 请求 DoH DoT 返回 DoH DoT c-ares的使用 打包 解析 简介 DNS over HTTPS利用HTTP协议的GET命令发出经由JSON等编码的DNS解析请求 ...

  2. 使用tensorboard可视化模型

    Tensorboard是TF自带的可视化工具.它可以让我们从各个角度观察与修改模型,比如观察模型在训练时的loss动态变化曲线而无需在迭代完毕后再画图.绘制神经网络的结构图.调节超参数等.下面以最简单 ...

  3. 迁移到 Eclipse: Eclipse 对 IntelliJ IDEAA 评估开发指南

    为何考虑 Eclipse 以及它与 IntelliJ IDEA 有什么不同 Eclipse 是一个免费的.正日益流行起来的 Java 集成开发环境,最新版本的 Eclipse 中提供了很多特性,这些特 ...

  4. LNMP一键安装

    PHP环境快捷搭建工具: https://lnmp.org/ [安装] wget https://soft.lnmp.com/lnmp/lnmp2.1.tar.gz -O lnmp2.1.tar.gz ...

  5. 【VMware VCF】管理 VCF 环境中组件的用户密码。

    默认情况下,VMware Cloud Foundation 使用 vCenter Single Sign-On 作为身份提供程序,并使用系统域作为其身份源,可以将基于 LDAP 和 OpenLDAP ...

  6. 有关终端Github无法访问,connection timed out:443等问题

    有关终端Github无法访问,connection timed out:443等问题 SSL_connect: Operation timed out in connection to github. ...

  7. 一个.NET开源、易于使用的屏幕录制工具

    前言 一款高效.易用的屏幕录制工具能够极大地提升我们的工作效率和用户体验,今天大姚给大家分享一个.NET开源.免费.易于使用的屏幕录制工具:Captura. 工具介绍 Captura是一款基于.NET ...

  8. Python 潮流周刊#82:美国 CIA 如何使用 Python?(摘要)

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  9. git log 常用方法

    • git log --all 查看所有分支的历史• git log --all --graph 查看图形化的 log 地址• git log --oneline 查看单行的简洁历史.• git lo ...

  10. 张正友的相机标定论文Flexible camera calibration by viewing a plane from unknown orientations的翻译

    张正友的相机标定论文Flexible camera calibration by viewing a plane from unknown orientations的翻译: 翻译的pdf版本为:htt ...