axios 请求改造封装

主要目标功能

• 快速请求，快速绑定
• 防止重复提交

模块梳理

• 接口模块
• 工具模块
• 请求模块

架构设计要点

• 利用 es6 的模块化规范，作为一个封装模块
• 直接无new 化构建对象
• 注入vue原型中，让后面的组件可以直接拿到
• 功能添加采用 原型式与静态结合

实现要点

• 保证可扩展性，可维护性
• 常用的方式设为默认加快速度
• 灵活控制目标data，请求回来直接自动绑定数据

代码演示

---

// src > assets > unit > qs.js
import axios from 'axios'
export default(function(){
    function qa(){
        var _iqaob = new _iqa();
        var _urlarr = arr || [];
        // 只在新建对象里执行一次循环
        for (var i = 0,len = _urlarr.length; i<len; i++){
            var _name = qa.getPathName(_urlarr[i]);
            (function(url){
                _iqaob[_name] = function () {
                    _iqaob.sendMes.call(_iqaob,url,ob);
                }
            })(_urlarr[i]);
        }

        // 无 new 化构造对象
        // 返回一个对象
        return _iqaob;
    }

    function _iqa(){
        // 内部代码
        this._vueob = {};
        this.statue = 0; // 状态码思想
    }

    // 请求模块 原型链注入
    _iqa.prototype.sendMes = function (url, ob) {
        var self = this;
        var _url = url || "";
        var _ob = ob || {};
        var _type = _ob.type || 'get'; // 百分之七八十的请求都是 get 请求
        var _data = _ob.data || {}; // 请求参数
        var _suecc = ob.suecc || function(){};
        var _isblock = _ob.block || true; // 默认需要阻塞
        
        // 状态 模式
        var status = {
            get: function(){
                var _quary = qa.qs(_data);
                axios.get(_url+_quary).then(function(res){
                    self.statue = 0; // 防止重复提交
                    var _result = _suecc.call(self._vueob, res);
                    var _name = qa.getPathName(_urlarr[i]);
                    // 用户是想数据处理之后加到 data 上面
                    if (_result) {
                        self._vueob[_name] = _result;
                    } else {
                        // 没有_result返回值，只是拿 data 做其他事情
                        self._vueob[_name] = res.data;
                    }
                });
            },
            post: function(){},
            put: function(){},
            delete: function(){}
        }

        if(self.statue == 0 || _isblock){
            if (_isblock){
                self.statue = 1;
            }
            status[_type]();
        }else {}
    }

    _iqa.prototype.v = function(vueob){
        this._vueob = vueob;
        return this;
    }

    // 静态
    // 拿到 文件名 './static/json1.json' 里的 json1
    qa.getPathName = function (url) {
        var _arr = url.split('/'); // ['.','static','json1.json']
        var _name = _arr[_arr.length - 1]; // ['json1.json']
        var _newname = _name.split('.')[0]; // ['json1']
        return _newname;
    }

    // get 请求参数 qs 然后拼接到 url 
    qa.qs = function(ob){
        var _str = "";
        if(JSON.stringify(ob) == '{}'){

        }else {
            _str += "?";
            var _len = 0;
            for (var item in ob) {
                if(_len != 0){
                    _str += "&"
                }
                _str += item;
                _str += "=";
                _str += ob[item];
                _len ++
            }
        }
        return _str;
    }

    return qa;
})();

static 下新建 json1.json、json2.json文件 模拟一个接口数据
往 Vue 原型链中注入 qa 便于每个子组件都能拿到qa方法

// main.js
import qa from './assets/unit/qa'

Vue.prototype.qa = qa(['./static/json1.json', './static/json2.json']);

// HelloWorld.vue
<template>
    <div>{{json1}}</div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: 'Helloworld',
        data(){
            return {
                json1: ''
            }
        },
        mounted: function(){
            this.qa.v(this).json1({data: {a:1}, suecc:function(res){
                console.log(res);
            }})
        }
    }
</script>

小结

设计思路： 功能确定 > 模块梳理 > 架构基础 > 功能构建