1. statut ajax
ajax est la technologie de base derrière la plupart des applications Web, il permet aux pages de faire des requêtes asynchrones aux services Web, de sorte que les données peuvent être affichées sans un aller-retour de page vers le serveur, pas de rafraîchissement Le terme ajax n'est pas une technologie, il fait plutôt référence à la
méthode des données du serveur de chargement de scripts.
Tous les navigateurs modernes prennent en charge nativement les objets XHR via le constructeur XMLHttpRequest.
Il existe actuellement deux API Ajax : XMLHttpRequest ancien et Fetch moderne. À l'heure actuelle, la plupart des bibliothèques Ajax pour l'empaquetage XMLHttpRequest sont encore utilisées côté Web, telles que : axios, jquery, SuperAgent, Request, etc.
Basé sur nos scénarios métier dans des projets réels, cet article implémente des requêtes http pour l'encapsulation d'axios, et les libère sur le serveur intranet NPM. À l'heure actuelle, les projets technologiques Vue3 que nous avons impliqués ont été mis en service les uns après les autres, et nous continuons également à optimiser.
2. Introduction aux axios
axios est une bibliothèque de requêtes réseau basée sur des promesses pour node.js et les navigateurs. Il est isomorphe (c'est-à-dire que le même code peut s'exécuter dans le navigateur et node.js). Côté serveur, il utilise le module http natif node.js, et côté client (côté navigateur), il utilise XMLHttpRequests.
Caractéristiques :
· Créer XMLHttpRequests à partir du navigateur · Créer des requêtes http
à partir de node.js · Prise en charge de l'API Promise · Intercepter la demande et la réponse · Transformer les données de demande et de réponse · Annuler la demande · Convertir automatiquement les données JSON · Défense du support client contre XSRF
axios est un client HTTP léger, il exécute des requêtes HTTP basées sur le service XMLHttpRequest, prend en charge une configuration riche, prend en charge Promise et prend en charge les navigateurs et les terminaux Node.js. Depuis Vue2.0, You Yuxi, l'auteur de Vue, a annoncé qu'il annulerait la recommandation officielle de vue-resource et recommanderait axios à la place. Maintenant, axios est devenu le premier choix de la plupart des développeurs Vue.
3. Encapsuler http
3-1. Axios abstraits, créez des GAxios de classe
3-1-1. Définir le type de paramètre
Pour la configuration commune donnée par l'officiel, combinée à certaines configurations communes que nous avons dans le projet
// http请求配置
export interface RequestOptions {
// 请求参数拼接到url
joinParamsToUrl?: boolean;
// 格式化请求参数时间
formatDate?: boolean;
// 是否处理请求结果
isTransformRequestResult?: boolean;
// 是否加入url
joinPrefix?: boolean;
// 接口地址， 不填则使用默认apiUrl
apiUrl?: string;
// 错误消息提示类型
errorMessageMode?: 'none' | 'modal';
// 自定义处理请求结果
customTransformResult?: Function | null;
}
// Axios初始化配置, AxiosRequestConfig对象为Axios的请求配置
export interface CreateAxiosOptions extends AxiosRequestConfig {
prefixUrl?: string;
transform?: AxiosTransform;
requestOptions?: RequestOptions;
messageError?: Function | null;
modalError?: Function | null;
}
3-1-2. Créer des GAxios
Sur la base des informations de configuration ci-dessus, nous créons d'abord la classe axios GAxios (le nom est défini par vous-même, principalement utilisé pour distinguer les objets Axios)
export class GAxios {
// TODO ......
}
L'objet GAxios doit contenir une série d'opérations pour notre objet Axios : exemple d'initialisation, éléments de configuration, intercepteurs, méthodes de requête, etc.
export class GAxios {
private axiosInstance: AxiosInstance;
private options: CreateAxiosOptions;
constructor(options: CreateAxiosOptions) {
this.options = options;
this.axiosInstance = axios.create(options);
}
// 创建axios实例
private createAxios(config: CreateAxiosOptions): void {
this.axiosInstance = axios.create(config);
}
// 拦截器配置
private setupInterceptors(): void {
// TODO ......
}
// 请求方法
request<T>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
// TODO ......
return new Promise((resolve, reject) => {
};
}
}
3-1-3. Configuration de l'intercepteur
Interceptor définit quatre types : interception de requête/réponse, interception d'erreur de requête/réponse
// 请求之前的拦截器
requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfig;
// 请求之后的拦截器
responseInterceptors?: (res: AxiosResponse<any>) => AxiosResponse<any>;
// 请求之前的拦截器错误处理
requestInterceptorsCatch?: (error: Error, options?: CreateAxiosOptions) => void;
// 请求之后的拦截器错误处理
responseInterceptorsCatch?: (error: Error, options?: CreateAxiosOptions) => void;
3-1-4. Définir la méthode de requête
class GAxios {
// 请求方法
request<T>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
// Merge参数opt
// 自定义请求转换
// 取消重复请求
// 拦截器
// 请求方法
return new Promise((resolve, reject) => {
this.axiosInstance
.request(opt)
.then((res) => {
resolve(res);
})
.catch((e: Error) => {
reject(e);
});
});
}
}
3-2. Créer une classe AxiosHttp
// GAxios的具体实现
class AxiosHttp {
private http: GAxios = null;
}
3-2-1. Définir les paramètres par défaut
{
timeout: 6 * 10 * 1000,// 1min
// 基础接口地址
baseURL: '',
// 接口可能会有通用的地址部分，可以统一抽取出来
prefixUrl: '',
headers: {
'Content-Type': ContentTypeEnum.JSON },
// 数据处理方式
transform,
// 配置项，下面的选项都可以在独立的接口请求中覆盖
requestOptions: {
// 默认将prefix 添加到url
joinPrefix: true,
// 需要对返回数据进行处理
isTransformRequestResult: true,
// post请求的时候添加参数到url
joinParamsToUrl: false,
// 格式化提交参数时间
formatDate: true,
// 消息提示类型
errorMessageMode: 'none',
// 接口地址
apiUrl: '',
// 自定义数据转换
customTransformResult: data => data,
// 自定义消息框方法
messageBox: data => data
}
}
3-2-2. Créer un objet http
Instanciez l'objet GAxios dans la classe AxiosHttp
this.http = new GAxios({
...});
3-2-3. Implémenter des méthodes de requête courantes
Dans la classe AxiosHttp, nous fournissons plusieurs méthodes de requête couramment utilisées : get, post, put, delete
De plus, nous devons encore améliorer la méthode http.request pour répondre aux besoins de davantage de scénarios.
3-2-4. Réglage de la méthode du jeton
Les informations de jeton sont généralement contenues dans l'en-tête de la demande, nous devons donc fournir une méthode Heder de paramètre personnalisé
public setToken(token: string): void {
this.http.setHeader({
Authorization: `Bearer ${
token}`
});
}
3-2-5. Renvoyer l'objet defHttp intégré
public getInstance(): GAxios {
return this.http;
}
En obtenant les objets d'Axios intégrés, des scénarios plus différents peuvent être réalisés
3. Exporter dans l'environnement vue3
Dans vue3, les composants sont enregistrés via la méthode app.use. Ici, nous réalisons l'enregistrement et l'utilisation de la bibliothèque http actuelle. Lorsque nous appelons la méthode app.use, l'implémentation réelle est la méthode d'installation du composant actuel.
3-3-1. Méthode d'installation
const uniqueKey = Symbol();
const install = (app: App, config: Partial<CreateAxiosOptions>): void => {
app.provide(uniqueKey, new AxiosHttp(config));
}
export default {
install
}
3-3-2. Utilisation de fournir et d'injecter
export default defineComponent({
setup() {
const axiosHttp = useAxiosHttp();
// axiosHttp 即为注入的http对象
// 在实际开发场景中,axiosHttp可以在项目入口处挂载到全局对象
// 例:app.config.globalProperties.$http = axiosHttp;
}
});
3-3-3. Publier le package en cours
Après avoir testé les cas d'utilisation dans la démo, nous sommes prêts à publier notre première version du package. Ici, nous prenons le serveur npm privé comme exemple.
- Remplacez la source actuelle par le serveur intranet via nrm.
- Connexion compte npm connexion
- publier npm publier
4. Introduction aux spécifications de développement de composants communs
Habituellement, le processus de développement d'un ensemble de composants, de bibliothèques, etc. est relativement lourd, et différentes équipes feront des choix en fonction de la situation temporelle.
Peu importe comment simplifier la gestion des branches, les conventions de nommage, les règles de communication, etc., ce sont inévitable.
5. Pratique
Dans notre projet métier (vue3), installez notre package publié. Spécifiez l'
adresse source du package en commençant par @gfe via le fichier .npmrcnpm install @gfe/request --saveyarn add @gfe/request
6. Accès et utilisation
import {
useLogout } from "@/hooks/useLogout";
import router from "@/router";
import {
BASE_API } from '@/utils/env';
import AxiosHttp from '@gfe/request';
import {
message, Modal } from 'ant-design-vue';
import {
App } from 'vue';
export function setupHttp(app: App<Element>) {
app.use(AxiosHttp, {
baseURL: BASE_API,
messageError: async (msg: string, status: number) => {
if (`${
status}` == `401`) {
await useLogout();
router.replace({
name: 'Login' });
}
message.error(msg);
},
modalError: (msg: string) => {
Modal.error({
title: '错误提示',
content: msg
})
}
});
}
7. Résumé
- Le document de bibliothèque de composants actuel est affiché à l'aide de vuepress et le code source se trouve dans le dossier /docs
- Configurez les informations d'authentification d'entrepôt.npmrc, qui est utilisé pour lire ou télécharger des packages npm dans des entrepôts privés, sans effectuer d'opération de connexion npm chaque fois que vous publiez
always-auth=true
_auth="用户名:密码"的base64编码
- Adresse source
https://github.com/gfe-team/gfe-request