手摸手封装vue中api文件，让项目更容易维护

上一篇 vue中axios请求封装（包括处理异常响应，添加loading动画，公共请求头）
我们提到了如何封装请求文件，这里我们就来介绍一下怎么使用封装好了的公共请求文件request.js

发现痛点

开发项目时在页面内直接调用接口导致下面的问题，开发者会异常痛苦

1. 每次接口改变了（包括接口名改变了，接口传输形式改变，get请求传递参数改变了等），无法批量修改，要打开每个页面更改
2. 多个地方调用接口要写很多重复代码，包括请求地址
3. 每次查找一个接口时，不是搜索接口就是上下滚动查找好久

总结痛点

具体归纳为以下几点：

可以批量修改的、维护性高、延展性高、按模块划分的一个或者多个请求集合 => api.js

解决痛点

上面说的这么麻烦，全是自己归纳的，感觉描述得有点啰嗦，尽力了 (灬°ω°灬)，然鹅，方法非常简单，看代码就知道了

• 方法一

封装后，用的整体导出的形式，页面内方便易懂

import {get, post} from "@/utils/request";

export default {
 getUsers () {
   return get(`/api/user/getUsers`)
 },
 getProductList (page, limit, param) {
   return get(`/api/product/getProductList?page=${page}&limit=${limit}&productName=${param}`)
 }
 setRole (data) {
   return post('/api/auth/setRole', data)
 }
}

组件内调用

<script>
import api from "@/api/index"
export default {
 methods: {
   getUsers () {
     api.getUsers().then(res => {
         this.options = res.data.rows
     })
   }
 }
}
</script>

• 方法二

封装后，用的单个导出的形式，页面内按需引入即可

import {get, post} from "@/utils/request";

export const setRole = (data)=> post('/api/auth/setRole', data)
export const getUsers = () => get('/api/user/getUsers')
export const getProductList= (page, limit, param) => get(`/api/product/getProductList?page=${page}&limit=${limit}&productName=${param}`)

组件内调用

<script>
import { getUsers } from "@/api/index"
export default {
 methods: {
   getUsers () {
     getUsers().then(res => {
         this.options = res.data.rows
     })
   }
 }
}
</script>

以上两种方法仅是导出方式不同，看个人喜好采纳使用

小分享

最后，末尾给个小分享，大家可以看到url处我这边采用的是 ˋ 这个符号（英文输入法键盘esc下面的符号）而没有采用'/api/product/getProductList?page' + page + '&limit=' + limit + '&productName=' + param这种拼接的形式
源于es6语法中模板字符串，具体可以看看 进入之后往下翻 2.字符串
可以直接传参的形式，不用再用 + 拼接啦，参数用${params}形式直接编写，外部用 ˋ 包裹