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

栏目: jQuery · 发布时间: 5年前

内容简介:本文同步更新于我的github由于本人一直在用Typescript作开发,所以提交的文件后缀名是.ts结尾的。你也可以自行修改后缀名,并将里面的类型声明去除即可;一直以来,我们在提交请求时经常会遇到这样的情况,就是提交的参数与后台所需不一致; 这样一来,无疑就浪费了一次请求。特别的实在网络比较慢的情况下,返回需要的时间过长,这样对用户来说体验很不好。

本文同步更新于我的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';

    // 当个请求参数校验
    async function anyRequest(id) {
        // 
        return service.get({
            url: `path/${id}`
        }, {
            fileds: {
                id: '需要校验的参数名'
            },
            rules: {
                id: [validate.isRequired],
            }
        });
    }
    
    // 多个请求参数校验
    async 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);
        }
    }

复制代码

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

别具光芒

别具光芒

李烨 / 人民邮电出版社 / 2006-11 / 55.00元

本书面向实用,提供了大量网页设计与制作的细节图解,由浅入深地讲解网页制作的步骤与方法,同时介绍了Web标准以及使用目前流行的“层”布局方式,并结合多个实例讲解了采用层叠样式表与层布局相结合制作网页的方法。   本书给出了几大典型网页制作实例,包括小型企业网站、电子相册网站、网络电台、网上商店、旅游网站等,这些实例基本上覆盖到了常用的网页设计与制作知识。本书在详细讲解各个实例的过程中,不仅介绍......一起来看看 《别具光芒》 这本书的介绍吧!

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具