100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > axios请求拦截器中取消请求

axios请求拦截器中取消请求

时间:2018-09-12 12:17:49

相关推荐

axios请求拦截器中取消请求

对某些特定请求,可以在请求拦截器中进行判断,是否取消改请求

起因:一个商城的首页,有商品的展示,可以直接添加到购物车;

但一般进入首页不会要求用户登录,如果添加购物车,提示用户进行登录;

但是这个添加购物车的请求依然会发出,这时需要在请求拦截内进行处理

下面是完整代码:

import axios from 'axios';import {Message} from 'element-ui'import router from '../router/index'// 按照axios官方提示需要引入这两步const CancelToken = axios.CancelToken;const source = CancelToken.source();const instance = axios.create({baseURL: "http://xxx.xxx.xxx",timeout: 5000,headers: {'Content-Type': 'application/x-www-form-urlencoded'}})// 请求拦截器instance.interceptors.request.use(config => {let tokenS = sessionStorage.getItem('token');let tokenL = localStorage.getItem('token');if (tokenS || tokenL) {config.headers['token'] = tokenS || tokenL;} else {if (config.url === '/order/shoppingCart') {// 当没有token时,发送了添加购物车的请求,此时取消本次请求let errorMsg = { msg: 'cancelCache' + Math.random(), data: [] }config.cancelToken = source.tokensource.token.reason = errorMsg // 这一行的作用是每次传递的errorMsg都是不一样的,如果没有这一行,那么,即使source.cancel(errorMsg)中有传递不同的参数,接收的时候也是一样的// cancel函数可以不用传参,也可以传入取消后执行的操作,取消后可提示用户需要登录source.cancel(errorMsg)// 定时器1.5s后自动跳转到登录页setTimeout(() => {router.push('/login')}, 1500);}}return config;}, err => {return Promise.reject(err);})

响应拦截:

// 添加响应拦截器axiosInstance.interceptors.response.use(handleSuccessRes, handleErrorRes)function handleSuccessRes (response) {resolve(response)}function handleErrorRes (error) {if (error.message.msg.indexOf('cancelCache') > -1) {return Promise.resolve(error)}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。