Mockjs の原理の紹介

この記事で共有した内容は、Mockjs の原理の紹介です。必要な友人はそれを参照できます。

前書きと分割したプロジェクトがあります。バックエンドは Mockjs を使用しており、バックエンドはデータ形式を提供し、フロントエンドはシミュレートされたインターフェイスを通じてデータを返すことでページをレンダリングします。私はしばらくの間、このプラグインがどのようにして Ajax リクエストをブロックするのか理解できませんでした。 . ネットで検索してみたところ、情報が非常に少なく、失敗しました。

ある日、ふと思いついたのですが、ajaxメソッドのリクエストを書き換える場合、リクエスト送信前にコールバックを提供することでこの機能を実現できるのではないか？

アイデア

環境を準備する

• 
  

  最も便利なjqueryから始めて、$.ajaxを書き換えることを計画してください

• $.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解決する必要がある主な問題は次のとおりです。
  

  
  

$.ajax が書き直されようとしているので、リクエストを送信するための xhr メソッドを自分で実装する必要があります (カプセル化された ajax メソッドを書くのが面倒なので、$.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);
    }
}

🎜🎜 🎜関数検出🎜🎜🎜🎜🎜🎜 上記のコードはコントロールバーに直接コピーして実行でき、b リクエストのみが送信されていることがわかります。リクエストをインターセプトすると同時に、期待されるデータも取得できます🎜🎜🎜🎜 Mockjsのランダムデータの機能については、今のところ考慮しません🎜🎜🎜🎜🎜まとめ🎜🎜🎜🎜その後また、Mockjs ソース コードも大まかに調べました。これは、jquery と zepto の $.ajax メソッドも書き直して実装されました。これは、ajax メソッドをネイティブ js でカプセル化した場合、それを実装できないことを意味します。以下はネイティブ JS の ajax メソッドです。興味がある場合は、自分で確認してください。

以上がMockjs の原理の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。