优雅的导出请求接口

不知道大伙是如何定义请求接口的，就我目前这个项目而言，是这么做的：

// api.js
import http from './config/httpServer.js'

 /* 登入页面获取公钥 */
export const getPublicKey = (data) => {
    return http({ url: '/userGateway/user/getPublicKey' }, data)
}

// 用户登录
export const login = data => {
    return http({ url: '/userGateway/userSentry/login' }, data)
}

// 验证码登录
export const loginByCode = data => {
    return http({ url: '/userGateway/userSentry/loginByCode' }, data)
}

在组件中使用接口：

<script>
import { getPublicKey } from './config/api.js'
export default {
    mounted() {
        getPublicKey().then(res => {
            // xxx
        }).catch(err => {
            // xxx
        })
    }
}
</script>

这一切都很正常，但，我们这个项目总共有200多个接口，按照上面这种定义方式的话，一个接口定义加上空行需要占用 5 行，所以如果把全部接口都定义到这个 api.js 里需要占用 1000 行左右，看了实在让人心很慌呀。所以觉得应该这个地方应该可以优化一下。

/userGateway/user/getPublicKey

上面这是一个后端给接口路径，斜杆把这个路径划分成 3 个子串，而最后一个子串必定是唯一的，所以我们可以从中做文章。于是乎就有了下面的代码：

// api.js
const apiList = [
    '/userGateway/user/getPublicKey',  // 登入页面获取公钥
    '/userGateway/userSentry/login',  // 用户登录
    '/userGateway/userSentry/loginByCode',  // 验证码登录
]

let apiName, API = {}
apiList.forEach(path => {
    // 使用正则取到接口路径的最后一个子串，比如: getPublicKey
    apiName = /(?<=\/)[^/]+$/.exec(path)[0]      
    API[apiName] = (data) => {
        return http({url: path}, data)
    }
})
export { API }

这样大概就把定义一个接口需要占用 5 行缩小到只需要 1 行了，大大减小了文件内容。在浏览这个文件的时候，我的鼠标滚轮也不会一直在滚滚滚了。

如果是这样定义接口的话，那在使用的时候还需要做点变化的：

<script>
import { API } from './config/api.js'
export default {
    mounted() {
        API.getPublicKey().then(res => {
            // xxx
        }).catch(err => {
            // xxx
        })
    }
}
</script>