内容简介:本文同步更新于我的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); } } 复制代码
最后,谢谢大家的观看,如果有什么疑问或有更好的写法,欢迎分享~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- vue实战 - 车牌号校验和银行校验
- 更加灵活的参数校验,Spring-boot自定义参数校验注解
- 一坨一坨的 if/else 参数校验,终于被 Spring Boot 参数校验组件整干净了
- SpringMVC——数据校验
- gin请求数据校验
- Dojo 表单校验
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。