Einführung in die Prinzipien von Mockjs

Der Inhalt, der in diesem Artikel mit Ihnen geteilt wird, ist eine Einführung in die Prinzipien von Mockjs. Er hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen

Vorwort

Es gibt ein Projekt, das das Front-End und das Back-End trennt und Mockjs verwendet. Das Back-End stellt das Datenformat bereit und das Front-End gibt Daten über die Simulationsschnittstelle zurück, um die Seite zu rendern. Ich war verwirrt über dieses Plug-in. Ich habe online gesucht und nur sehr wenige Informationen gefunden, aber ohne Erfolg.
Dann dachte ich eines Tages plötzlich: Wenn die Ajax-Methodenanforderung neu geschrieben wird, kann diese Funktion dann erreicht werden, indem vor dem Senden der Anfrage ein Rückruf bereitgestellt wird?

Ideen

• Bereiten Sie die Umgebung vor
  

• Beginnen Sie mit der bequemsten Abfrage und planen Sie das Umschreiben es$.ajax

• Die Hauptprobleme, die gelöst werden müssen, sind
  

• $.ajaxEs wird bald neu geschrieben, daher müssen Sie es selbst tun. Implementieren Sie eine xhr-Methode zum Senden von Anfragen (ich bin zu faul, die gekapselte Ajax-Methode zu schreiben, also speichere ich $.ajax für die spätere Verwendung)

• So passen Sie die abzufangende Anforderungsadresse an

• Nach dem Abfangen der Anforderung werden die vorbereiteten Daten als Daten verwendet, nachdem die Anforderung erfolgreich war

• Code-Implementierung

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

• Funktionserkennung
  

• Das Obige Code kann direkt in die Steuerleiste kopiert und ausgeführt werden. Wir können sehen, dass nur eine Anfrage gesendet wurde, und wir können auch die erwarteten Daten erhalten

• Was die Funktion der Zufallsdaten von Mockjs, wir werden sie vorerst nicht berücksichtigen

Zusammenfassung

• Danach habe ich auch eine genommen Sehen Sie sich den Mockjs-Quellcode grob an. Er wird auch durch Umschreiben der $.ajax-Methode von jquery und zepto implementiert. Dies bedeutet, dass es sich um eine von nativem js gekapselte Ajax-Methode handelt, die nicht abgefangen werden kann Methode von nativem js. Wenn Sie interessiert sind, können Sie es selbst überprüfen:
  

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

  
  

Das obige ist der detaillierte Inhalt vonEinführung in die Prinzipien von Mockjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!