多个接口可以封装成一个接口处理

最新推荐文章于 2023-06-14 14:50:22 发布

原创最新推荐文章于 2023-06-14 14:50:22 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

js开发中常用的工具类总结专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种在开发中优化接口调用的方法，通过将多个相同返回结果的接口进行封装，减少代码冗余。示例展示了如何将针对不同场景的接口请求集中在`getList`和`getRequestHead`两个方法中，提高了代码复用性和可维护性。

在开发中会遇到这样的修求，可能一个页面会根据不同的情况会请求多个接口，返回一样的结果。如果各个接口分别编写一次，先的很搂，并且代码冗余。那么分装成一个方法来请求。
解决办法：其实就是将写一个方法，return请求接口，用另一个方法来接收结果

分装后的代码

import {saleDeptAnalysis,userAnalysis,contractIndustry} from '@/api/bi/customer'  //接口
/**
     * 查询表格数据，接口接口返回的数据
     * @param parmas
     */
    getList(parmas) {
      this.getRequestHead(parmas)
        .then(res => {
          if (res.code === 0) {
            this.tableData = res.data.list
          }
        })
    }
    
    /**
     * 设置请求接口
     * @param parmas
     */
    getRequestHead(parmas) {
      this.loading = true
      this.tableData = []
      if (parmas === 'sale') {
        return saleDeptAnalysis(this.listPostParams)
      } else if (parmas === 'employees') {
        return userAnalysis(this.listPostParams)
      } else if (parmas === 'contract') {
        return contractIndustry(this.listPostParams)
      }
    },

没有封装

 /**
     * 查询表格数据
     * @param parmas
     */
    getList(parmas){
      this.loading = true
      this.tableData = []
      if (parmas === 'sale') {
        saleDeptAnalysis(this.listPostParams)
          .then( res => {
            if (res.code === 0) {
              this.tableData = res.data.list
            }
          })
      } else if (parmas === 'employees') {
        this.listPostParamsif (parmas === 'employees')
        userAnalysis(this.listPostParams)
          .then( res => {
            if (res.code === 0) {
             this.tableData = res.data.list
            }
          })
      } else if (parmas === 'contract') {
        contractIndustry(this.listPostParams)
          .then( res => {
            if (res.code === 0) {
             this.tableData = res.data.list
            }
          })
      }
    },