• axios封装与api接口管理


    作用:

    axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。

    axios

    一般我会在项目的src目录中,新建一个network文件夹,作为我们的网络请求模块,
    然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件
    用来封装我们的axios,api.js用来统一管理我们的接口url, request.js对外暴露我们放在的api方法。

    环境变量配置

    我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀,
    让他在不同的开发环境下切换不同的接口 所以我会创建一个config目录。在下面放三个js文件里面有不同的url地址来便于我们开发

    axios请求拦截

    我会在里面开启vant轻提示 给用户带来更好的体验,也会判断vuex里面是否有token如果有的话会把它放到请求头里.方便后期的开发

    axios响应拦截

    主要对返回的数据做一些判断,如果是200的话我们就正常进行,再比如401未登录我们则跳转到登陆页面
    在此处关闭轻提示

    api接口统一管理

    新建一个api文件夹,里面有一个index.js,以及多个根据模块划分的接口js文件。
    index.js是一个api的出口,其他js则用来管理各个模块的接口。

  • 相关阅读:
    基础概述 01
    VMware Workstation Pro 无法在Windows 上运行 检查可在Windows上运行的此应用的更新版
    在博客园安家
    mysql的主从复制配置
    PHP 9 大缓存技术总结
    Mysql分库分表方案
    VMware 虚拟机的网络连接方式详解
    关于memecache的使用及清楚示意
    SVN:冲突解决 合并别人的修改
    Linux环境Nginx安装多版本PHP
  • 原文地址:https://www.cnblogs.com/luckyjiu9/p/13891229.html
Copyright © 2020-2023  润新知