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

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文件里就搞定了不用到处找,封装接口的意义在哪里呢?

阅读 730
评论
    9 个回答

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

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

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

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

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

          • 3
          • 新人请关照

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

            • 全部放一个文件明显有问题,应该根据一定的标准,划分多文件,根据需求引用
            • 封装的核心是../axios

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

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

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

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

                    感谢各位,经思考决定去掉前端接口文件,直接在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文档,随接口修改自动更新的,为什么在前端再统一管理呢,所以就去掉不跟风。

                      撰写回答

                      登录后参与交流、获取后续更新提醒