Le contenu partagé avec vous dans cet article est une introduction aux principes de Mockjs. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer
Il existe un projet qui sépare le front-end et le back-end et utilise Mockjs. Le back-end fournit le format des données, et le front-end renvoie les données via l'interface de simulation pour rendre la page. J'étais perplexe à propos de ce plug-in. Comment bloquer la requête ajax ? J'ai cherché en ligne et trouvé très peu d'informations, mais en vain.
Puis un jour, j'ai soudain pensé, si la requête de la méthode ajax est réécrite, cette fonction peut-elle être réalisée en fournissant un rappel avant d'envoyer la requête ?
Préparer l'environnement
Commencez avec le jquery le plus pratique et prévoyez de réécrire il$.ajax
Les principaux problèmes qui doivent être résolus sont
$.ajax
sera sera bientôt réécrit, vous devez donc le faire vous-même. Implémentez une méthode xhr pour envoyer des requêtes (je suis trop paresseux pour écrire la méthode ajax encapsulée, donc je cache $.ajax
pour une utilisation ultérieure)
Comment faire correspondre l'adresse de la demande qui sera interceptée
Après avoir intercepté la demande, comment utiliser les données pré-préparées comme données une fois la demande réussie
Implémentation du code
let Mock = { // 存储匹配规则 rules: new Map(), // 缓存ajax方法 ajax: $.ajax, mock(url, data) { this.rules.set(url, data) } }// 改写ajax方法$.ajax = function(options) { Mock.ajax({ url: options.url, beforeSend(XHR) { let data = Mock.rules.get(options.url) // 找到规则拦截请求,并执行回调(return false时会拦截请求) data && options.success(data) return !data }, success(data) { // 找不到规则,正常发送请求 options.success(data) } }) }// 测试Mock.mock('/a', { a: 1, b: 2}) $.ajax({ url: '/a', success(data) { console.log(data, 1) } }) $.ajax({ url: '/b', success(data) { console.log(data, 2) } })
Détection de fonction
Le code ci-dessus peut être copié directement dans la barre de contrôle et exécuté. On peut voir que seule b est envoyée à la requête, une requête a été interceptée, et on peut également obtenir les données attendues
Quant à la fonction. des données aléatoires Mockjs, nous ne les considérerons pas pour le moment
Après cela, j'ai également pris un aperçu regardez le code source de Mockjs. Il est également implémenté en réécrivant la méthode $.ajax
de jquery et zepto, ce qui signifie que s'il s'agit d'une méthode ajax encapsulée par js natif et ne peut pas être interceptée,
Ce qui suit est une méthode ajax. de js natif Si vous êtes intéressé, vous pouvez le vérifier vous-même :
var Ajax={ get: function(url, fn) { var xhr = new XMLHttpRequest(); // XMLHttpRequest对象用于在后台与服务器交换数据 xhr.open('GET', url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // readyState == 4说明请求已完成 fn.call(this, xhr.responseText); //从服务器获得数据 } }; xhr.send(); }, post: function (url, data, fn) { // datat应为'a=a1&b=b1'这种字符串格式,在jq里如果data为对象会自动将对象转成这种字符串格式 var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 添加http头,发送信息至服务器时内容编码类型 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { // 304未修改 fn.call(this, xhr.responseText); } }; xhr.send(data); } }
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!