axiosリクエストをカプセル化し、コミットパラメータを検証
11329 ワード
本文は私のgithubに同期して更新してクリックして行きます.主にaxiosリクエストをブロックし、リクエストパラメータを検証し、不正な値のコミットを防止する方法について説明します.もちろん、フォームパラメータの検証に直接使用することもできます.使用する検証ツールは
本人はTypescriptを開発しているので、提出したファイルの接尾辞名は.tsが終わる.接尾辞名を自分で修正し、中のタイプ宣言を削除することもできます.
ファイルの説明
従来、私たちはリクエストを提出するときによくこのような状況に遭遇しています.提出したパラメータがバックグラウンドに必要なものと一致していません.これでは、一度のお願いを無駄にしたに違いない.特に,ネットワークが遅い場合,戻りに要する時間が長すぎるため,ユーザにとって体験が悪い.
使用
APIリクエスト
検査方法及びパラメータ設定
パッケージaxiosリクエスト
最后に、ありがとうございました.もし何か质问やもっと良い书き方があれば、分かち合いを歓迎します.
作者:Echi本文リンク:juejin.im/user/585 e 36...著作権声明:この文章は特別声明のほか、@BY-NC-SAライセンス契約を採用しています.転載は出典を明記してください!
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/585 e 36...著作権声明:この文章は特別声明のほか、@BY-NC-SAライセンス契約を採用しています.転載は出典を明記してください!