9

この小さなコードは、フロントエンド バックエンドレス環境用に別の .js ファイルに記述しました。myfile.jsonajaxの呼び出しがあるたびに取得する必要があり/somelinkます。

angular.module('myApp')
.config(function($provide) {
  $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
})
.run(function($httpBackend, $http) {

  $httpBackend.whenGET('/somelink').respond(function(method, url, data) {
    $http({method: 'GET', url: '/somelink/myfile.json'})
    .success(function(data, status, headers, config) {
      return data;
    })
    .error(function(data, status, headers, config) {
    });

  });
});

ただし、このコードは機能せず、エラーが発生しました:

Error: Unexpected request: GET /somelink/myfile.json

誰かがこれを修正するのを手伝ってくれますか?

コード内の .json ファイルを取得するために $http を直接呼び出したくないことに注意してください。これを行う目的は、このコードをバックエンドレス開発用に個別に保持することです。

ありがとう。

更新 1:

追加した：

$rootScope.$apply(); 
$httpBackend.flush();

以前と同じエラーに加えて、別のエラーが発生しました。Uncaught Error: No pending request to flush !

更新 2:

遊んだ後、小さなハックを見つけました。.run()これを他のすべての $httpBackend モックの前に置きます。また、この.jsファイルは、すべてのコントローラー/サービス/ディレクティブの前で、app.js ブートストラップの後に配置する必要があります。

  var data;

  $.ajax({
    type: 'GET',
    async: false,
    url: '/somelink/myfile.json'
  }).success(function(res) {
    data = res;
  }).error(function(data) {
  });

次に、これ：

$httpBackend.whenGET('/somelink').respond(data);

重要なのはasync: false、JSON が variable に確実に読み込まれるようにすることですdata。これらはすべて、他のオブジェクトがトリガーされて ajax イベントを呼び出す前に発生する必要があります。これは、フロントエンド バックエンドレス開発専用のハックです。運用時には、もちろんこの .js ファイルは削除されます。私はこれがあまり好きではありasync: falseませ$.ajax()ん$http

4

5 に答える 5

8

以下は、ハッキングなしで私のために働いた

$httpBackend.whenGET('/endpoint').respond($resource("/path/to.json").query());

礼儀https://groups.google.com/d/msg/angular/grbwk-VehDE/UBIho6qcmLMJ

于 2014-06-18T07:21:52.983 に答える
4

この問題に対する非常にクリーンな解決策は、リクエストを処理するように作成されplain vanilla JavaScriptて$httpBackendいないため、 を使用することです。asynchronous

jQueryこのメソッドはコードを必要としません。

$httpBackend.when('GET', 'http://localhost:3000/api/data').respond(getData());

function getData() {
               var request = new XMLHttpRequest();
               request.open('GET', '/db/myData.json', false);
               request.send(null);

               return [request.status, request.response, {}];
}

このヒントは https://stackoverflow.com/a/24287558/4742733から入手しました。

于 2015-11-29T09:55:02.193 に答える
3

返信が遅いことは承知していますが、将来の仲間の助けになることを期待して、私の経験を共有します.

この非常に役立つブログ投稿のおかげで、正常に機能するモック バックエンドを実現できました。

まず、すべてのエンドポイントを定数として 1 つの場所に配置して、それらを 1 回だけ定義し、模擬バックエンド、テスト、および明らかに AJAX 呼び出しを担当するすべてのサービスで利用できるようにします。

angular.module('appName.urls', [])
 .constant('API_endpoints', {
   login: 'authentication/login',
   logout: 'authentication/logout',
   signUp: 'authentication/signup',
   userList: 'users/list'
 });

ngMockE2E次に、アプリ全体への依存関係として追加しました。

angular.module('appName', [
  'ui.router',
   ... 
  'ngMockE2E'
])

次に、実際にモックされたバックエンド用のファイルを作成しました。それを呼び出してfakeBackend.js、index.html. このファイルは上記のリンクから取得したものですが、これは私の実装からの単純化された例です (ここではエミュレートされたログインを提供しています):

angular.module('appName').run(function($httpBackend, API_endpoints) {

   var credentials = {
    email : 'a@a.a',
    password : '12345'
  };

  $httpBackend.whenPOST(API_endpoints.login)
              .respond(function(method, url, data) {

    var req = JSON.parse(data),
        res;
    // very light credential check...
    if(req.email === credentials.email && req.password === credentials.password ){
        // generate a successful response
        res = [200, {uuid:1}, {}];
    } else {
        // generate an error if credentials are wrong
        res = [400, {}, {}];
    }
    return res;
  });

   // Respond to all templates request
   // Every file in states/ folder will be served automatically
   $httpBackend.whenGET(/states\//).passThrough();
}):

statesすべてのテンプレートが存在するフォルダーからすべてのコンテンツを提供する最後の行にも注意してください。これは明らかに非常に単純化された例ですが、ブログの投稿者は非常に詳細で便利なplunkrも共有しています。

于 2015-02-13T23:19:55.510 に答える
1

生のjavascriptを使用して同期xhrリクエストを作成するという@Aakash Shahの回答は、私にとって驚くほどうまくいきました。これを一般化する方法を明確にするために、もう少しコードを示します。

addMock('/mocks/json/myjson.json', new RegExp('yada/.*/getMyJson'));

    function addMock(jsonFilePath, urlToReplace) {
        $httpBackend.whenGET(urlToReplace)
            .respond.apply(this, getData(jsonFilePath)); // apply to put the parameters as args
    }

    function getData(jsonFilePath) {
        var request = new XMLHttpRequest();
        request.open('GET', jsonFilePath, false);
        request.send(null);

        return [request.status, request.response, {}];
    }
于 2015-11-30T17:27:57.673 に答える