AngularJS 中如何使用 $http 实现 SPA 应用的模拟数据请求-JavaScript中文网-JavaScript教程资源分享门户

背景

在 SPA（Single Page Application）应用中，前端需要与后端进行数据交互。在开发过程中，后端可能还没有完成对应的接口，或者需要对接口进行测试，这时候就需要前端模拟数据请求。AngularJS 提供了 $http 服务，可以方便地实现模拟数据请求。

$http 服务

$http 是 AngularJS 中用于进行 HTTP 请求的服务。它可以发送 GET、POST、PUT、DELETE 等请求，并且支持 Promise 风格的异步编程。

发送 GET 请求

下面是一个发送 GET 请求的示例代码：

$http.get('/api/users')
  .then(function(response) {
    $scope.users = response.data;
  });

这段代码中，$http.get() 方法用于发送 GET 请求，请求的 URL 是 /api/users。请求成功后，使用 then() 方法处理响应，将响应数据赋值给 $scope.users 变量。

发送 POST 请求

下面是一个发送 POST 请求的示例代码：

$http.post('/api/users', {name: 'John', age: 18})
  .then(function(response) {
    $scope.users.push(response.data);
  });

这段代码中，$http.post() 方法用于发送 POST 请求，请求的 URL 是 /api/users。请求体是一个对象，包含两个属性 name 和 age。请求成功后，使用 then() 方法处理响应，将响应数据添加到 $scope.users 变量中。

发送 PUT 请求

下面是一个发送 PUT 请求的示例代码：

$http.put('/api/users/1', {name: 'John', age: 20})
  .then(function(response) {
    $scope.users[0] = response.data;
  });

这段代码中，$http.put() 方法用于发送 PUT 请求，请求的 URL 是 /api/users/1。请求体是一个对象，包含两个属性 name 和 age。请求成功后，使用 then() 方法处理响应，将响应数据更新到 $scope.users[0] 变量中。

发送 DELETE 请求

下面是一个发送 DELETE 请求的示例代码：

$http.delete('/api/users/1')
  .then(function(response) {
    $scope.users.splice(0, 1);
  });

这段代码中，$http.delete() 方法用于发送 DELETE 请求，请求的 URL 是 /api/users/1。请求成功后，使用 then() 方法处理响应，将 $scope.users 数组中的第一个元素删除。

模拟数据请求

在前端开发过程中，我们可能需要模拟数据请求。这时候可以使用 $httpBackend 服务，它可以拦截 $http 服务发送的请求，并返回模拟数据。

下面是一个模拟 GET 请求的示例代码：

angular.module('myApp', [])
  .run(function($httpBackend) {
    var users = [{id: 1, name: 'John', age: 18}, {id: 2, name: 'Mary', age: 20}];

    $httpBackend.whenGET('/api/users').respond(users);
  });

这段代码中，$httpBackend.whenGET() 方法用于拦截 GET 请求，请求的 URL 是 /api/users。调用 respond() 方法返回模拟数据，这里返回了一个包含两个用户的数组。

下面是一个模拟 POST 请求的示例代码：

// javascriptcn.com 代码示例
angular.module('myApp', [])
  .run(function($httpBackend) {
    var users = [{id: 1, name: 'John', age: 18}, {id: 2, name: 'Mary', age: 20}];

    $httpBackend.whenPOST('/api/users').respond(function(method, url, data) {
      var user = angular.fromJson(data);
      user.id = users.length + 1;
      users.push(user);
      return [200, user, {}];
    });
  });

这段代码中，$httpBackend.whenPOST() 方法用于拦截 POST 请求，请求的 URL 是 /api/users。调用 respond() 方法返回模拟数据，这里返回了添加了 id 属性的用户对象。

下面是一个模拟 PUT 请求的示例代码：

// javascriptcn.com 代码示例
angular.module('myApp', [])
  .run(function($httpBackend) {
    var users = [{id: 1, name: 'John', age: 18}, {id: 2, name: 'Mary', age: 20}];

    $httpBackend.whenPUT(/\/api\/users\/(\d+)/, undefined, undefined, ['id'])
      .respond(function(method, url, data, headers, params) {
        var id = parseInt(params.id);
        var user = angular.fromJson(data);
        var index = users.findIndex(function(u) { return u.id === id; });
        users[index] = user;
        return [200, user, {}];
      });
  });

这段代码中，$httpBackend.whenPUT() 方法用于拦截 PUT 请求，请求的 URL 是 /api/users/:id。调用 respond() 方法返回模拟数据，这里返回了更新后的用户对象。

下面是一个模拟 DELETE 请求的示例代码：

// javascriptcn.com 代码示例
angular.module('myApp', [])
  .run(function($httpBackend) {
    var users = [{id: 1, name: 'John', age: 18}, {id: 2, name: 'Mary', age: 20}];

    $httpBackend.whenDELETE(/\/api\/users\/(\d+)/, undefined, ['id'])
      .respond(function(method, url, data, headers, params) {
        var id = parseInt(params.id);
        var index = users.findIndex(function(u) { return u.id === id; });
        users.splice(index, 1);
        return [204, null, {}];
      });
  });

这段代码中，$httpBackend.whenDELETE() 方法用于拦截 DELETE 请求，请求的 URL 是 /api/users/:id。调用 respond() 方法返回模拟数据，这里返回了空响应。

总结

在 AngularJS 中，$http 服务可以方便地发送 HTTP 请求，$httpBackend 服务可以拦截 HTTP 请求并返回模拟数据。在前端开发过程中，使用这两个服务可以方便地模拟数据请求，提高开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656917d0d2f5e1655d1a8b56