關於Mockjs的原理介紹

這篇文章給大家分享的內容是關於Mockjs的原理介紹，有著一定的參考價值，有需要的朋友可以參考一下

前言

有一個前後端分離的項目用到過Mockjs，後端提供了數據格式，前端通過模擬接口的返回數據，進行頁面的渲染，有一段時間，百思不得其解，這個插件是怎麼把ajax請求給攔下來的，網路上搜尋了一番，資料甚少，未果。
後來有一天，不知道怎麼的突然想到，如果把ajax方法請求改寫了，在發送請求之前提供一個回調是不是能實現這個功能？

思路

• 準備環境
  

• #從最方便的jquery入手，打算改寫$.ajax

• #需要解決的問題主要有
  

• ##$ .ajax即將被改寫，所以要自己實現一個發送請求的xhr方法(又懶得寫封裝的ajax方法，於是把$.ajax緩存起來，以待後用)

• 如何去匹配將被攔截的請求位址

• 攔截了請求之後，如何把預先準備好的資料當做請求成功後的資料

• 程式碼實作

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

  登入後複製

• 功能偵測

  
  

• 以上程式碼可直接拷貝至控制欄運行，我們可以看到只發送了b請求，a請求被攔截了下來，同時我們也能拿到所預期的資料

• 至於Mockjs隨機資料的功能，我們暫不考慮

• 之後我也粗看了下Mockjs原始碼，它也是改寫了jquery和zepto的

  $.ajax方法所實現，這意味著如果是自己用原生js封裝的ajax方法，是不能攔截的如下，是一個原生js的ajax方法，有興趣可以自己去偵測一下：
  

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

  登入後複製

  
  

以上是關於Mockjs的原理介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！