本文同步更新于我的github点击前往。主要讲解如何拦截axios请求,并对请求参数进行校验,防止提交非法值。当然,你也可以直接用于表单参数校验,使用的校验工具是async-validator查看详情;之前曾用它封装过Vue的form表单组件,这个找个时间再出个教程,教你如何封装属于自己的Vue组件。

由于本人一直在用Typescript作开发,所以提交的文件后缀名是.ts结尾的。你也可以自行修改后缀名,并将里面的类型声明去除即可;

文件说明

root：
 |--validator # 校验方法
 |--axios # axios封装请求//拦截配置
 |    |--config.ts # axios拦截器配置文件
 |    |--service,ts # axios请求配置文件

一直以来,我们在提交请求时经常会遇到这样的情况,就是提交的参数与后台所需不一致;
这样一来,无疑就浪费了一次请求。特别的是在网络比较慢的情况下,返回需要的时间过长,这样对用户来说体验很不好。

使用

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);
        }
    }

最后,谢谢大家的观看,如果有什么疑问或有更好的写法,欢迎分享~