axios请求接口http_Vue实战038:api接口模块化统一管理【转】
一开始使用Vue时,我们用axios发送请求时一般会将api接口直接写在对应的请求方法中,这样当我们项目需要修改请求时我们就需要先去找到当前的组件,然后再找到对应的事件方法,最后才能将api修改,这样维护起来剧会变的很费时费力(特别是接口比较多的时候)。
//举个栗子this.$axios.post('http://127.0.0.1:8000/login/',{ username:this.uname, password:this.password,}).then(res=>{if(res.status==200){ Message.success('登陸成功') this.$router.push('/')}}).catch(error=>{ Message.error(error)})
随着适用了Vue,这时我们就会把api提取出来,用一个api.js文件来统一存放api接口,通过expot导出对应的接口,然后在用到的组件中引用该接口,这样当我们需要修改接口时只要到api文件中去统一处理即可,也方便我们了解项目中实现了哪些功能,目前这个项目是定义了一个baseURL,然后与接口进行拼接生成一个常量api,再将其导出给其他组件调用。
如果你的项目对axios进行了封装,那么我们这里还可以对api进一步优化,我们可以在封装的axios设置好基本路由,这样当我们拿到api后系统会为我们自动拼接路由,同时还可以统一的异常处理方案简化了每个请求书写,提高代码的可读性。如何封装axios可以参考文章 Vue实战037:axios二次封装和使用,
接下来我们继续优化api管理,继续拿我们的登陆接口来解析:http://127.0.0.1:8000/login/ ,这里可以分为4部分,分别是支持的协议(http协议),ip(127.0.0.1),端口(8000),路由(login/),假设每个api都是从同一台服务发出的,那么每个接口的协议、ip和端口都是一样的,这时我们就可以通过axios.defaults.baseURL = 'http://127.0.0.1:8000/'统一指定。
如何定义api模块
这里我们准备将axios.js引入api.js中,然后调用axios.js中的接口,接口需要提供3个参数,分别是method、url、params,这里可以用箭头函数,写起来简单。这样我们就定义了一个login方法,只需要传入method和params参数即可。
import api from '@/api/axios.js'export const login = (method, params) => api(method, 'login/', params)
如何使用
在组件中导入api中的方法,用到哪个导入哪个即可,然后再事件中调用我们的login方法,传入对应的method和params参数接口,是不是比之前简单又简洁了很多,封装还有 个好处就是可以很好的避开操作token,这样就不用在每个接口都手动的提交token操作了。
//引入组件中的方法import {login} from '@/api/api.js'//调用login方法,传入method和params即可login('post',{ username:this.uname, password:this.password,}).then(res=>{ if(res.status==200){ this.$message.success('登陸成功') this.$router.push('/') }}).catch(error=>{ this.$message.error(error)})
原文链接:https://blog.csdn.net/weixin_39922929/article/details/112399176