Introduction aux principes de Mockjs

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

Avant-propos

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 ?

Idées

• 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
  

• $.ajaxsera 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)
    }
  })

  Copier après la connexion

• 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

Résumé

• 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);
      }
  }

  Copier après la connexion

  
  

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!