zoukankan      html  css  js  c++  java
  • 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则用来管理各个模块的接口。

  • 相关阅读:
    织梦开发——相关阅读likeart应用
    织梦标签教程
    织梦专题调用代码
    HIT 2543 Stone IV
    POJ 3680 Intervals
    HIT 2739 The Chinese Postman Problem
    POJ 1273 Drainage Ditches
    POJ 2455 Secret Milking Machine
    SPOJ 371 Boxes
    HIT 2715 Matrix3
  • 原文地址:https://www.cnblogs.com/luckyjiu9/p/13891229.html
Copyright © 2011-2022 走看看