对于vue中axios拦截器简单封装
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
if (response.headers.x_auth_token) {
localStorage.setItem('x_auth_token', response.headers.x_auth_token); // 存储token
}
} else {
return Promise.reject(response);
}
},
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
case 401:
break;
// 403: token过期
case 403:
break;
// 404:请求不存在
case 404:
break;
default:
alert(error.response.data.message);
}
return Promise.reject(error.response);
}
}) axios 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断vuex中是否存在tocken
// 如果存在,则统一在http请求的header都加上tocken,这样后台根据tocken判断你的登录情况
// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
const token = localStorage.getItem('x_auth_token');
token && (config.headers.x_auth_token = token);
return config;
},
error => {
return Promise.error(error);
}
)
对于vue中axios拦截器简单封装的更多相关文章
- vue axios拦截器的封装
// request.js import axios from 'axios' import qs from 'qs' // 创建axios实例 const service = axios.creat ...
- vue中axios的使用与封装
分享下我自己的axios封装axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理 当然首先是npm安装axios 很简单$ npm install axios --save在 ...
- vue中axios的二次封装
我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建 ...
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- 聊聊 Vue 中 axios 的封装
聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...
- Vue中axios的封装和api接口的统一管理
更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...
- vue --- axios拦截器+form格式请求体
在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...
- Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...
随机推荐
- vs 设置护眼背景颜色
工具 —> 选项 —> 环境 —> 字体和颜色 —> 纯文本(显示项中) —> 项目背景 —> 自定义—> 色调位85.饱和度123.亮度205,保存即可.测 ...
- dig命令不能使用(-bash: dig: command not found)
解决方式: 直接使用yum进行安装: yum -y install bind-utils
- Linux 在 TOP 命令中切换内存的显示单位
顶部的内存信息可以在top运行时按E切换,每次切换转换率为1000,只是没有单位,切换的单位为 k,m,g,t,p: 1. 2. 3., 4. 底下的进程信息按e切换,每次切换转换率为1000,切换的 ...
- pytorch torch.nn 实现上采样——nn.Upsample
Vision layers 1)Upsample CLASS torch.nn.Upsample(size=None, scale_factor=None, mode='nearest', align ...
- 使用.whl文件安装torch和pytorch的方法
当使用pip install torch torchvision命令下载感觉很慢时 可以先到下面的网页将.whl文件下载下来,然后再运行安装即可: torchvision也是 下载好了以后,运行: p ...
- 多重if结构
package com.imooc; import java.util.Scanner; public class TypeExchange { public static void main(Str ...
- Win10+Ubuntu18.04安装双系统
一:相关资料 (一)Win10+Ubuntu18.04 亲测UEFI启动模式双硬盘+双系统成功安装经验(文章) (二)如何安装Linux与windows双系统?(视频) 推荐先看视频,之后按照文章进行 ...
- 【DataBase】Hsqldb与项目集成
Hsqldb与项目集成 进行模式下集成 可以集成进行(In-Process)模式下的hsqldb,由于数据存储在文件中,即使程序退出,数据也不会被销毁 采用jdbc集成的方式 package com. ...
- 【443】Tweets Analysis Q&A
[Question 01] When converting Tweets info to csv file, commas in the middle of data (i.e. locati ...
- PAT 甲级 1067 Sort with Swap(0, i) (25 分)(贪心,思维题)*
1067 Sort with Swap(0, i) (25 分) Given any permutation of the numbers {0, 1, 2,..., N−1}, it is ea ...