• 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
    	})
    }
    
    作者:流年少年
    出处:https://www.cnblogs.com/ishoulgodo/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    VUE课程参考---2、VUE基本使用
    VUE课程---1、VUE课程介绍
    JS数组常用方法---3、pop方法使用及原理
    JavaScript中数组元素删除的七大方法汇总
    Stack的三种含义
    JS数组常用方法---6、reverse方法
    数据库水平切分的实现原理解析---分库,分表,主从,集群,负载均衡器
    服务框架HSF分析之一容器启动
    淘宝HSF服务的原理以及简单的实现
    DAS 原文出自【比特网】
  • 原文地址:https://www.cnblogs.com/ishoulgodo/p/13593762.html
Copyright © 2020-2023  润新知