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则用来管理各个模块的接口。

  • 相关阅读:
    为什么测试人员需要了解代码逻辑、表结构
    http报文常见的请求头、响应头
    测试人如何做出一份好简历
    如何制定测试计划
    写SQL的套路
    我是如何理解对公信贷业务
    db2----实操篇
    Oracle----高级操作
    常见web中间件漏洞(二)Apache漏洞
    常见web中间件漏洞(一)IIS漏洞
  • 原文地址:https://www.cnblogs.com/luckyjiu9/p/13891229.html
Copyright © 2011-2022 走看看