【框架】axios封装（接口）

Skywen天问信息

于 2020-12-03 14:04:55 发布

阅读量294

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/Skywen_/article/details/110529770

版权

本文介绍了在Vue.js项目中axios接口的封装，旨在统一请求方式，简化代码，方便接口管理和调试。主要内容包括封装的作用、开发流程、封装结构，以及接口列表示例。同时，讨论了在封装过程中如何处理报错，特别是针对数据验证不通过的主动报错处理。

摘要由CSDN通过智能技术生成

【框架】axios封装（接口）

在这里插入图片描述

封装作用：接口的封装和实际项目开发流程和开发过程相关

1.统一请求方式，方便接口的取用和阅读
2.简化请求的代码量，减少重复代码冗余
3.接口代理
4.方便修改

开发流程(前端)

1.设计图和项目功能->2.后端写接口 ->3.提供前端接口 - ↓

->2.前端写页面->3.写功能->4.虚拟接口数据测试功能->5根据真实接口调整前端接口数据

import axios from 'axios'
import store from '@/core/store'

let API = (options, filter) => {
   

    //返回数据处理
    function Response(res) {
   
        if (res.code === 0) {
   
            return Promise.resolve(filter ? filter(res.data) : res.data);
        }
        else {
   
            return Promise.reject(res);
        }
    }

    //请求拦截，返回虚拟数据