Vue封装API，详细解释。【附带源码】

浅浅的花香味﹌ 2023-07-07 11:28 94阅读 0赞

## 1、为什么我们要封装API ##

**ps: 如果已经有了明确要封装API的需求，直接看第二步。**

**在没有封装API之前，我们是类似这样使用 axios 的**

this.$axios.post('blogArticle/frontList',parms)
    .then((resp) => { 
          this.blogList = resp.data,
          this.blogTotal = resp.total * 1
    })

**封装之后这样调用**

userlist(parms).then(resp => {         
          this.blogList = resp.data,
          this.blogTotal = resp.total * 1
    })

我们先不看具体是怎么封装的，但看使用，发现好像写的代码一样多呢。（等你了解了封装之后，可能觉得封装写的代码更多一些）

我最开始就是有这样的疑惑，所有我一直没有使用API的封装，因为我确实找不到使用它的理由。

**下面我们来看这个问题：假如上面这个API你在100个页面都使用到了，而这时候后端因为某种原因需要你改一下地址从 blogArticle/frontList 改成 blogArticle/list呢？**

*  那你是不是要改一百次？
 *  改一百次还是时间问题，问题是你知道这一百个页面都在那里嘛？你根本找不到

为了解决上面的问题，和使得代码更加的规范，我们可以把API进行封装。

## 2、如何封装API ##

#### 2-1：配置axios过滤器 request.js ####

*  你需要修改成 你的请求地址前缀 axios.defaults.baseURL
 *  我这里使用了ElementUI的Message，如果没有，你可以去掉。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]

**request.js**

/** * ajax请求配置 */
    import axios from 'axios'
    import {  Message } from 'element-ui'
    
    // axios默认配置
    axios.defaults.timeout = 10000 // 超时时间
    // axios.defaults.baseURL 请求地址前缀
    // User地址
    // axios.defaults.baseURL = 'http://127.0.0.1:8001'
    // tools地址
    // axios.defaults.baseURL = 'http://127.0.0.1:8088'
    // 微服务地址
    axios.defaults.baseURL = 'http://myzuul.com:9527/xdx'
    
    // 整理数据
    axios.defaults.transformRequest = function(data) { 
        data = JSON.stringify(data)
        return data
    }
    
    // 路由请求拦截
    axios.interceptors.request.use(
        config => { 
            config.headers['Content-Type'] = 'application/json;charset=UTF-8'
    
            return config
        },
        error => { 
            return Promise.reject(error.response)
        })
    
    // 路由响应拦截
    axios.interceptors.response.use(
        response => { 
            if (response.data.success === false) { 
                return Message.error(response.data.errDesc)
            } else { 
                return response.data
            }
        },
        error => { 
            return Promise.reject(error.response) // 返回接口返回的错误信息
        })
    export default axios

#### 2-2：创建API authority.js ####

*  这里我写两个演示，一个是get请求，一个是post请求。传递的到后台都是json格式的。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]

**authority.js**

// 权限管理API 【菜单、角色、权限】
    import request from '@/utils/request'
    
    /** * 添加菜单 * @param {*} data * @author 小道仙 * @date 2020年2月19日 */
    export function addMenu(data) { 
        return request({ 
            url: '/myuser/authority/menu/add',
            method: 'post',
            data
        })
    }
    
    /** * 菜单列表 * @param {*} query * @author 小道仙 * @date 2020年2月19日 */
    export function menuList(query) { 
        return request({ 
            url: '/myuser/authority/menu/list',
            method: 'get',
            params: query
        })
    }

#### 2-3：具体使用 ####

**1、在我们需要使用API的页面，引入**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]

**2、使用**

addMenu() { 
         addMenu(this.menuData).then(resp => { 
               this.drawer = false
               this.$message.success(resp.msg)
               this.getList()
               this.handleClose()
          })
    },

getList() { 
         const param = { 
              flag: 1
         }
         menuList(param).then(resp => { 
              this.tableData = resp.data
         })
    }

## 3、其它 ##

#### 3-1：这是我的一个开源项目，你可以参看源码 ####

[https://github.com/xdxTao/xdx-framework-vue][https_github.com_xdxTao_xdx-framework-vue]

#### 3-2：如果对你有帮助，可以关注我的微信公众号一起成长哦。 ####

![在这里插入图片描述][20200223114640450.jpg]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200223113726274.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200223113956585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200223114224164.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy,size_16,color_FFFFFF,t_70
[https_github.com_xdxTao_xdx-framework-vue]: https://github.com/xdxTao/xdx-framework-vue
[20200223114640450.jpg]: https://img-blog.csdnimg.cn/20200223114640450.jpg