Ajax-axios拦截器

拦截器作用

主要是在axios请求和响应之间拦截请求

拦截器有两种：

1.请求拦截器：

一般会统一在请求中添加token

2.相应拦截器：

一般会处理错误信息，和401时处理token(一般跳转到登录页面重新获取token)

拦截器常用处理流程图如下：

示例代码如下：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么// debuggerif (localStorage.getItem('token')) {config.headers.Authorization = localStorage.getItem('token')}return config;// config 请求报文 请求地址 请求方法 请求头 请求体
}, function (error) {// 对请求错误做些什么// debuggerreturn Promise.reject(error);
});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么// debuggerreturn response;// response响应报文
}, function (error) {// 对响应错误做点什么// debuggerToast.fail(error.response.data.message)if (error.response.status === 401) {location.href = './login.html'}return Promise.reject(error);
});

1.请求拦截器且执行成功时，

如果收到token值，把token追加到请求头的Authorization里

(Authorization这个参数是接口文档里要求的参数名)

2.相应拦截器且执行失败后，

1.2利用common.js文件中自带的Toast.fail()方法把报错文字打印在弹出框中

可以debugger查找报错的提示文字存储位置

2.2token没有获取到/过期时，即401

可以debugger查找状态码存储在error的具体位置

如果401，则通过跳转到登陆页面的方式重新获取用户的token

Ajax-axios拦截器相关推荐

5 拦截器拦截请求路由_手写简易版axios拦截器，实现微信小程序wx.request的封装与拦截...
前言: axios是一个功能强大的网络请求库,其中拦截器又是axios的精髓.在小程序的开发或者需要手动实现ajax的时候,没有实现对请求的拦截,开发的时候非常不方便,因此手写一个简易版的axios拦 ...
axios拦截器 config_axios拦截器
页面发送http请求,很多情况我们要对请求和其响应进行特定的处理:如果请求数非常多,单独对每一个请求进行处理会变得非常麻烦,程序的优雅性也会大打折扣.好在强大的axios为开发者提供了这样一个API: ...
axios 拦截器——基本用法及拦截器代码
之前在开发后台管理系统时,都是跟其他同事一起开发,说实在点,就是在别人开发的基础上写页面... 现在想把之前没有关注的点拾起来.. 今天看下axios拦截器的用法用vue写代码在做ajax请求时,可 ...
Vue的axios拦截器
Vue的axios拦截器为什么要使用拦截器? 在页面发送http请求,很多情况我们要对请求和其响应进行特定的处理,如:判断token,设置请求头.如果请求数非常多,单独对每一个请求进行处理会变得 ...
全局配置axios、axios 拦截器和 proxy 跨域代理
目录一.全局配置axios 1. 为什么要全局配置 axios 2. 如何全局配置 axios 3. 在 vue3 的项目中全局配置axios 4. 在 vue2 的项目中全局配置 axios ...
axios拦截器_78.1K 的 Axios 项目有哪些值得借鉴的地方
Axios 是一个基于 Promise 的 HTTP 客户端,同时支持浏览器和 Node.js 环境.它是一个优秀的 HTTP 客户端,被广泛地应用在大量的 Web 项目中. 由上图可知,Axios ...
axios vue 加载效果动画_vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳...
首先新建一个 loading.vue组件,写loading动画效果 .loader { width: 100%; height: 100%; display: flex; align-items: c ...
[js] axios拦截器原理是什么？
[js] axios拦截器原理是什么? 拦截器原理其实就是用use添加用户自定义的函数到拦截器的数组中. 最后把他们放在拦截器请求前,请求后.组成promise链式调用. // 组成`Promise` ...
使用Axios拦截器打印前端请求日志和后端后返回日志
在main.ts引入 import axios from 'axios'; axios.defaults.baseURL = process.env.VUE_APP_SERVER;/*** axios ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

Ajax-axios拦截器

Ajax-axios拦截器相关推荐

最新文章

热门文章