封裝axios請求並對提交參數進行校驗

時間 2019-12-06

原文原文鏈接

本文同步更新於個人github點擊前往。主要講解如何攔截axios請求,並對請求參數進行校驗,防止提交非法值。固然,你也能夠直接用於表單參數校驗,使用的校驗工具是async-validator查看詳情;以前曾用它封裝過Vue的form表單組件,這個找個時間再出個教程,教你如何封裝屬於本身的Vue組件。ios

因爲本人一直在用Typescript做開發,因此提交的文件後綴名是.ts結尾的。你也能夠自行修改後綴名,並將裏面的類型聲明去除便可;git

文件說明

root：
 |--validator # 校驗方法
 |--axios # axios封裝請求//攔截配置
 |    |--config.ts # axios攔截器配置文件
 |    |--service,ts # axios請求配置文件

複製代碼

一直以來,咱們在提交請求時常常會遇到這樣的狀況,就是提交的參數與後臺所需不一致; 這樣一來,無疑就浪費了一次請求。特別的是在網絡比較慢的狀況下,返回須要的時間過長,這樣對用戶來講體驗很很差。github

使用

API 請求

// api
    import service from 'path/service';
    import {
        validate
    } from 'path/validator';

    // 當個請求參數校驗
    function anyRequest(id) {
        // 
        return service.get({
            url: `path/${id}`
        }, {
            fileds: {
                id: '須要校驗的參數名'
            },
            rules: {
                id: [validate.isRequired],
            }
        });
    }
    
    // 多個請求參數校驗
    function anyRequest(id, obj) {
        // 
        return service.post({
            url: `path/${id}`,
            data: {
                name: 'Echi',
                age: '26'
            }
        }, {
            fileds: {
                id: '須要校驗的參數名',
                obj: '這是一個對象'
            },
            rules: {
                id: [validate.isRequired],
                obj: {
                    ...validate.isObject,
                    fileds: {
                        name: [validate.isRequired],
                        age: [validate.isRequired],
                    }
                }
            }
        });
    }

複製代碼

校驗方法及參數設置

// validator
    import AsyncValidator from 'async-validator';

    /** * 校驗請求參數規則 * @desc 用於表單校驗,經過異步校驗,當校驗出錯時會拋出異常 * @export * @param [Object] [fileds={key: value}] 須要校驗的字段 * @param [Object] [rules={key: validator}] // 校驗規則 * @returns void */
    export default function requestValidator(fileds = {}, rules = {}) {
        return new Promise((resolve, reject) => {
            const validator = new AsyncValidator(rules);
            validator.validate(fileds, {
                firstFields: true
            }, (errors, data) => {
                const status = !errors ? 'success' : 'error';
                const message = errors ? errors[0].message : '';
                if (status === 'success') {
                    resolve({
                        status,
                        message,
                        data
                    });
                } else {
                    console.warn(`當前參數校驗不經過,錯誤信息: ${message}`);
                    reject({
                        status,
                        message,
                        data,
                        isValid: true
                    });
                }
            });
        });
    }

    // 校驗規則
    // 字段擴展請看 https://github.com/yiminghe/async-validator
    export const validate = {
        // 必填項
        isRequired: {
            required: true
        },
        // 字符串校驗
        isString: {
            type: 'string'
        },
        // 對象校驗
        isObject: {
            type: 'object'
        },
        // 數組校驗
        isArray: {
            type: 'array'
        },
        // 數值校驗
        isNumber: {
            type: 'number'
        }
    };

複製代碼

封裝axios請求

// service
    import axios from './config';
    import requestValidator from '../validator';

    // HTTP工具類
    export default class Http {
    public static async request(params: any, descriptor ?: any) {
        // 添加請求攔截校驗
        if (descriptor !== undefined) {
            let fileds = descriptor.fileds || {};
            let rules = descriptor.rules || {};
            await requestValidator(fileds, rules);
        }
        return await axios(params);
    }

    /** * get * @param [url] 地址 * @param [data] 數據 * @returns Promise */
    public static get(req: any, descriptor ?: any): any {
        return this.request({
            method: 'GET',
            url: `/${req.url}`,
            params: req.data,
        }, descriptor);
    }

    /** * put * @param [url] 地址 * @param [data] 數據 * @returns Promise */
    public static put(req: any, descriptor ?: any): any {
        return this.request({
            method: 'PUT',
            url: `/${req.url}`,
            data: req.data,
        }, descriptor);
    }

    /** * post * @param [url] 地址 * @param [data] 數據 * @returns Promise */
    public static post(req: any, descriptor ?: any): any {
        return this.request({
            method: 'post',
            url: `/${req.url}`,
            data: req.data,
        }, descriptor);
    }

    /** * delete * @param [url] 地址 * @param [data] 數據 * @returns Promise */
    public static delete(req: any, descriptor ?: any): any {
        return this.request({
            method: 'DELETE',
            url: `/${req.url}`,
            params: req.data,
            }, descriptor);
        }
    }

複製代碼