封装axios请求并对提交参数进行校验

本文同步更新于个人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);
        }
    }

复制代码

最后,谢谢你们的观看,若是有什么疑问或有更好的写法,欢迎分享~

本文做者： Echi
本文连接： juejin.im/user/585e36…
版权声明： 本文章除特别声明外，均采用 @BY-NC-SA 许可协议。转载请注明出处！