vue中对接口的二次封装

在前端开发，由于一直用的是vue框架，所以用久了就需要对项目要求更工程化，代码组件复用，代码可读性、健壮性等等，以下是我在vue框架开发过程中给总结出来的二次封装，每次复制粘贴改个url，参数就可以

1、在src文件目录下新建一个api文件夹用于存放所有请求的api，便于维护等

src/api/template.js:
 import request from '@/utils/request' // axios的封装 后续添加axios二次封装

//  /cosmopaas-dev为跨域规则 前面文章有提到
// post方式传参用data
export function getCommonList(query) {
  return request({
    url: '/cosmopaas-dev/algorithm/getAlgorithmModelPage',
    method: 'post',
    data: query
  })
}

// get方法传参用params字段
export function getUserInfo(token) {
  return request({
    url: '/user/info',
    method: 'get',
    params: { token }
  })
}

2、使用

在js文件中：
<script>
import { getTemplateList, getTemplateCategoryList } from '@/api/template' // 引入二次封装的api
export default {
   methods: {
      getList() {
          getTemplateList(params.pageSize, params.pageNum, params.category, params.isPublish, params.ownerId).then((res) => {
             console.log(res)
          }).catch((err) => {
            console.log(err)
          })
     }
}