温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么消除axios拦截中的if

发布时间:2022-04-18 10:29:45 来源:亿速云 阅读:144 作者:iii 栏目:开发技术

今天小编给大家分享一下怎么消除axios拦截中的if的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

    基本拦截

    axios的响应错误拦截中,难免会对error.status做各种各样的if判断,又或者switch。为了防止枯燥乏味的生活(给自己挖坑,换一种姿势去写拦截

    // 以下大概是日常碰到的操作,拦截响应,判断status做相应操作
    function login () {
      console.log('登陆逻辑')
      return promise.reject(error)
    }
    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      return response;
    }, function (error) {
      if (error.status === 401) {
        // 401重新登录
        console.log('未登陆')
        return login(error)
      } else if (error.status === 404) {
        console.log('404-什么都没')
        return promise.reject(error)
      } else if (error.status === 422) {
        console.log(error.response.data.message)
        return promise.reject(error)
      } else if (error.status === 500) {
        console.log('服务器内部错误')
        return promise.reject(error)
      } else {
        // 其他请求,直接抛出让业务去处理
        return promise.reject(error)
      }
    });

    设计轮子

    思考方向

    首先思考下怎么实现这个东西

    • 需要一个在内部消化if的逻辑判断

    • 根据判断去执行相应的逻辑,意味着我们要在内部维护一个逻辑数组(以下称为管道数组),配合成功后即触发对应管道。所以在开始调用函数去执行前,先要收集好管道。这个方法需要传一个标记(用来判断是否匹配)和回调函数(匹配成功后的逻辑)

    • 除了传标记,需要传一个payload(例如拦截中的error)参数,payload可以让我们在回调函数做出更多的对应操作

    • 在最后再添加一个default函数来收集匹配失败后的函数。

    现在,已经在心中拟好了一个小轮子的五脏六腑。

    轮子骨架

    // 定义个一个class
    class Enterclose {
      constructor () {
        // 维护管道数组
        this.pond = {}
        // 默认管道
        this._default = null
      }
      /**
       * 收集管道
       * callback(payload)
       * @param {any} sign 标记
       * @param {Function|Object} callback 回调函数|函数this
       * @return this
       * */
      use (sign, callback) {
        return this
      }
      /**
       * 收集匹配失败的管道
       * callback(payload)
       * @param {Function} callback 回调函数|函数this
       * @return this
       * */
      default (callback) {
        this._default = callback
        return this
      }
      /**
       * 执行管道流
       * @param {any} sign 标记
       * @param {any} payload
       * @return
       */
      start (sign, payload) {
      }
    }

    详细实现

    以上把基本的api骨架写好,然后再一个一个慢慢实现内部的逻辑。

    首先是use,用来收集管道,需求中标记是唯一的,所以我们的this.ponds的结构是{标记: callback}

    use (sign, callback) {
        this.ponds[sign] = callback
        return this
    }

    其中我们需要一个方法用来启动Enterclose

    通过getCallback函数去筛选和标记匹配的管道,返回对应的函数。这样一个消除if的小轮子就搞好啦

    start (sign, payload) {
        const fn = this.getCallback(sign)
        if (fn) {
          return fn(payload)
        }
    }
    /**
    * 根据标记获取函数
    * @param {*} sign 
    * @return {Function}
    */
    getCallback (sign) {
        const key = Object.keys(this.ponds).find(key => key === sign)
        if (key) {
          return this.ponds[key]
        } else if (this._default) {
          return this._default
        }
    }

    实践

    创建实例,用use和default收集管道,然后在拦截中通过start触发判断

    const enterclose = new Enterclose()
    // 收集管道
    enterclose
    .use(401, function (error) {
      console.log('未登陆')
      return login(error)
    })
    .use(404, function (error) {
      console.log('404-什么都没')
      return promise.reject(error)
    })
    .use(429, function (error) {
      console.log(error.response.data.message)
      return promise.reject(error)
    })
    .use(500, function (error) {
      console.log('服务器内部错误')
      return promise.reject(error)
    })
    .default(function (error) {
      // 收集默认管道
      return promise.reject(error)
    })
    axios.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      return response;
    }, function (error) {
      // 启动
      return enterclose.start(error.status, error)
    });

    你也可以根据自己的场景做一些调整,例如支持Promise啊,或者说加一个finally函数,每次走管道最后都会调用这个回调函数之类

    以上就是“怎么消除axios拦截中的if”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI