vue中axios调用封装为接口的意义是什么？（感觉不直观更复杂了啊）

Question

vue中axios调用封装为接口的意义是什么？好多例子是每个模块写一个接口类例如：

import axios from '../axios'
export const login = data => {
    return axios({
        url: '/user/login',
        method: 'post',
        data
    })
}
// 登出
export const logout = () => {
    return axios({
        url: '/user/logout',
        method: 'get'
    })
}

再加一个index.js引入所有接口，然后在Vue文件中调用：

this.$api.user.login(data).then((res) => {
        this.user = res.data
    })

但是可以直接引用axios不用封装直接调用：

this.$http.post('/user/login', data).then(res => {
       this.user = res.data
    })

感觉后者更直观啊，修改时直接在Vue文件里就搞定了不用到处找，封装接口的意义在哪里呢？

Answer 1

感谢各位，经思考决定去掉前端接口文件，直接在Vue文件里调用后台接口地址，简洁明了容易查找。后端接口有文档和示例查找是比较方便的。例如以下“/usr/login”就是接口地址：

this.$http.post('/user/login', data).then(res => {
       this.user = res.data
    })

axios的封装是需要的，拦截(权限,请求头设置等)、报错统一处理这些，这个$http就是封装的。去掉的每个模块的接口类。
以上的写法，浏览代码时，看首很清晰，直观看到后台接口地址，参数及处理，无须额外的文件配置。如果另单独封装一个接口文件，每次接口调整如增加新接口，接口文件也要跟着改，而且，vue代码中是这样的：

this.$api.user.login(data).then((res) => {
        this.user = res.data
    })

还需要找一下$api.user对应的封装接口文件，去看那个方法地址是否正确等，js还不能像java一样直接打开引用的类和方法，比较麻烦，好处不明显，把后台接口统一管理？后台接口本来就有Swagger文档，随接口修改自动更新的，为什么在前端再统一管理呢，所以就去掉不跟风。

Answer 2

所谓MVC嘛，每个部分都是分离的。
比如你哪天一高兴，把 login 的后端接口地址改了，或者把 data 的格式改了，那么封装的好处就是只要改一个地方就好了。

Answer 3

如果你有多个前端项目就知道好处了

Answer 4

1、接口变更，你一个接口很多地方用的时候，还有一些返回数据预处理。

2、独立数据来源，方便切换mock数据和真实接口

设计程序要面对很多未知，面对未知我们能做什么，把东西分分类，大东西拆成独立的小东西，降低复杂度是很重要的手段

Answer 5

他是为了多次调用同一个接口的时候方便，像这种统一一个地方写api的 多半都是对axios进行了封装、拦截、报错统一处理。不然你每个接口去写一遍拦截，报错，就会写出来很多一模一样的代码。

Answer 6

• 全部放一个文件明显有问题，应该根据一定的标准，划分多文件，根据需求引用

• 封装的核心是../axios

  • 这个文件封装了拦截(权限,请求头设置等)、报错统一处理，等等，增加了代码复用率

Answer 7

主要意义在于模块化
就像1*100
你非要1+1+1+...1,一样可以实现
开心就好

Answer 8

如果就自己一个人开发, 怎么爽就怎么来咯, 我这么干 主要是可以给每个接口注释, 然后ide就可以提示传入类型和返回响应, 就不大需要经常反复翻文档看传参以及担心拼写错误, 其次也不用担心调用接口的时候地址拼接错误

Answer 9

就我自己的使用经验说一下，（我没有把login挂载到全局this上，只是单独封装一层）
1.我不太喜欢组件内啰嗦的一堆url和其他结构，不太直观，封装后组件内显得更简洁，导入一个方法名就行。
2.利于多组件多端复用，不用再抄一遍url，直接导入login方法就行，vscode是可以直接指到封装的方法的。
3.可以把一些不用出现在页面中的、但是接口必须要的字段，在这一层存取，组件更简洁。
4.最后一个，我喜欢这么分层……，显得很规整 [笑哭]