标签: angular-http

AngularJS中的HTTP承诺对象是什么?

虽然我正在使用AngularJS中的HTTP promise对象,但我没有一个明确的概念,即HTTP承诺对象实际上是什么,以及AngularJS中HTTP promise对象和传统对象之间的区别是什么!

请问有人解释一下吗?

javascript angularjs angular-http angular-promise

9
推荐指数
1
解决办法
8411
查看次数

发送$ http.get两次

编辑1:伙计们,我注意到我在我的身份验证工厂中调用$ http.get('/ posts')(出于特殊目的).抱歉这个愚蠢的问题.当赏金结束时我会删除它.

我有以下代码来加载页面https://localhost:3000/#/home,该页面从数据库中获取所有帖子并显示它们.

问题是,我意识到日志router.get /posts被打印了两次,而herethere只警告一次.

有谁知道这是否意味着$http.get进行了两次?如果是这样,问题出在哪里?

app.config(... ...) {
    $stateProvider
        .state('global', {
            templateUrl: '/htmls/global.html',
            controller: 'GlobalCtrl'
        })
        .state('global.home', {
            url: '/home',
            templateUrl: '/htmls/home.html',
            controller: 'MainCtrl',
            resolve: {
                postPromise: ['posts', function (posts) {
                    return posts.getAll();
                }]
            }
        });
}]);

app.factory('posts', ['$http', 'auth', function ($http, auth) {
    var o = { posts: [] };

    o.getAll = function () {
        alert("before");
        return $http.get('/posts').then(function (res) {
            alert("after");
            angular.copy(res.data, o.posts);
        })
    }
    ... ... …
Run Code Online (Sandbox Code Playgroud)

node.js express angularjs angularjs-factory angular-http

9
推荐指数
1
解决办法
698
查看次数

Angular 6 使用 POST 重定向到外部 url

我正在尝试将支付网关合并到 angular 应用程序中,我发现以下付款合作伙伴提供的用于合并的 JavaScript 片段,我通过添加ngNoForm 对其进行了调整,并使其与 angular 一起使用;堆栈闪电战

<form ngNoForm method="post" action="https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp">
<input type="hidden" name="amount" value="1" >
<input type="hidden" name="currCode" value="608" >
<input type="hidden" name="payMethod" value="CC">
<input type="submit" name="submit">
</form>
Run Code Online (Sandbox Code Playgroud)

接下来不是<Form> POST + Action直接从组件模板使用 HTML ,我想对我的后端服务器进行 REST 调用,执行其他一些步骤,并将该 API 响应映射到我的支付合作伙伴期望的内容,然后使用 HttpClient POST 重定向到我的支付合作伙伴,这将应该做同样的事情并重定向到应该负责支付过程的支付合作伙伴网站,所以简而言之,我想以编程方式实现同​​样的事情,我尝试过:

redirectToPaymentHandler(): Observable<any> {
  const urlEncodeData = 'amount=1&currCode=608&payMethod=CC';
  let headers = new HttpHeaders();
  headers = headers.append('Content-Type', 'application/x-www-form-urlencoded');
  headers = headers.append('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8');

  return this.httpClient.post('https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp',
    urlEncodeData, {
      headers,
      responseType: 'text'
    }).pipe(catchError((error) => {
      console.log(error)
      return …
Run Code Online (Sandbox Code Playgroud)

angular-http angular angular-httpclient

9
推荐指数
1
解决办法
9093
查看次数

请求angular.js $ http(或$ resource)POST和transformRequest作为服务的示例

使用角度1.1.5并需要将urlencoded数据传递给后端.我从这里开始使用解决方案: 如何将数据作为表单数据而不是请求有效负载发布?

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
    data: xsrf
}).success(function () {});
Run Code Online (Sandbox Code Playgroud)

我已经成功地将它嵌入到我的控制器中,但"更清洁"的方式是使用服务和$ resource而不是$ http对象.在本主题的1.1.2之后可以使用transformRequest和$ resource: $ resource transformResponse不工作 但我找不到任何有效的例子.任何人都可以使用$ resource作为服务对象提供上述解决方案的示例吗?

post angular-resource angularjs-service angular-http

8
推荐指数
1
解决办法
2万
查看次数

无法在AngularJS中的请求中指定标头

我的应用程序中有2个部分 - Angular前端和rails服务器.并且因为它是不同的域,所以默认情况下请求不起作用.有很多工作人员,包括堆栈,但它不适合我.

这是我在角度控制器中的方法:

$scope.test =->
  # transform = (data) ->
  #   $.param data

  $http.post('http://localhost:3000/session/create', 'token=some',
    headers:
      'Access-Control-Allow-Origin': 'http://localhost:9000',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, X-Requested-With'
    # transformRequest: transform
  ).success (responseData) ->
    console.log(responseData)
Run Code Online (Sandbox Code Playgroud)

我评论了转换数据,服务器响应没有区别.

我配置了app(在某些帖子中看到了这样):

.config ["$httpProvider", ($httpProvider) ->
  $httpProvider.defaults.useXDomain = true
  delete $httpProvider.defaults.headers.common["X-Requested-With"]
]
Run Code Online (Sandbox Code Playgroud)

我想这会使请求不像ajax(但我不确定).

但我的请求中没有标题.他们都在某些领域Access-Control-Request-Headers:access-control-allow-origin, accept, access-control-allow-headers, access-control-allow-methods, content-type:

    Request URL:http://localhost:3000/session/create
    Request Method:OPTIONS
    Status Code:404 Not Found

    Request Headers

    Accept:*/*
    Accept-Encoding:gzip,deflate,sdch
    Accept-Language:en-US,en;q=0.8,ru;q=0.6
    Access-Control-Request-Headers:access-control-allow-origin, accept, access-control-allow-headers, access-control-allow-methods, content-type
    Access-Control-Request-Method:POST
    Connection:keep-alive
    DNT:1
    Host:localhost:3000
    Origin:http://localhost:9000
    Referer:http://localhost:9000/
    User-Agent:Mozilla/5.0 …
Run Code Online (Sandbox Code Playgroud)

javascript ruby-on-rails cross-domain angularjs angular-http

8
推荐指数
1
解决办法
1万
查看次数

Angular:返回$ q.defer().promise而不是$ http promise

观看了很多Egghead.io视频,我注意到一个常见的模式是返回自定义承诺并在回调中解决它.

.factory('myFact', function($q, $http) {
    return {
        getData: function() {
            var deferred = $q.defer();
            $http.get('/path/to/api')
                .success(function(data) {
                    deferred.resolve(data);
                });
            return deferred.promise;
        }
    };
});
Run Code Online (Sandbox Code Playgroud)

我通常会这样写:

.factory('myFact', function($http) {
    return {
        getData: function() {
            return $http.get('/path/to/api')
                .then(function(res) {
                    return res.data;
                });
        }
    };
});
Run Code Online (Sandbox Code Playgroud)

返回$q.defer()承诺而不是$http承诺是否有任何好处?这些方法与我相同.

angularjs angular-http angular-promise

8
推荐指数
1
解决办法
2402
查看次数

Web请求上的进度条($ http)AngularJS

我是AngularJS的新手.我正在尝试向Web服务发出请求.我想实现一个进度条,告诉我这个请求的百分比.也许有人有一个基本的例子可以指导我.非常感谢,如果有人能帮我一把.我会尝试解释一下.我有这样的要求.我希望你从头到尾告诉我百分比.我是新手,所以我想找一些简单但功能齐全的东西.

  $http({
    method: 'GET',
    url: "www.examplejson.com/example",
    timeout:5000
  }).success(function(data){
   console.log("complete!");
  }).error(function(response,status,headers,config) {
   console.log("error");
  });
Run Code Online (Sandbox Code Playgroud)

angularjs angular-http

8
推荐指数
2
解决办法
5671
查看次数

所有数据都在页面重新加载时消失.有什么办法可以避免吗?

我在角度js中开发了一个仪表板应用程序,它具有搜索功能和多个视图,其中包含来自该搜索功能的大量不同数据.

它的单页应用程序.因此,我在页面重新加载时遇到问题所有数据都消失了,它显示了带有空白数据的视图.

有没有办法解决这个问题或任何帮助我创建单页面应用程序并在页面重新加载时维护相同数据的语言?

任何建议将不胜感激.

搜索页面 搜索页面

搜索后的数据 搜索后的数据

重装后的数据 重装后

html angularjs angular-http

8
推荐指数
1
解决办法
3168
查看次数

测试Http Service进行多次调用并返回observable而不映射响应

我有一个数据服务,它从服务器获取数据并生成多个请求,然后返回一个可观察数组.我想测试数据.

我尝试做的是在我发送的mockrespone数组中包含两个observables我不知道这是否是测试数据的正确方法.

但测试失败,尤其是异步测试块中的最后三个测试

重要提示:我想测试一下,当将charId设置为falsy并将comicsId设置为falsy时,调用方法,订阅它返回的observable,在你模拟了http后,你会得到一个包含两个预期响应的数组.如果charId是真实的,则与预期的4个响应相同.当comicsId真实时,6个预期的响应也是如此

//获取数据的服务

getChar(): Observable<any> {

    const Observables = [];
    Observables.push(this.http.get('https://gateway.marvel.com:443/v1/public/characters?apikey'));
    Observables.push(this.http.get('https://gateway.marvel.com:443/v1/public/comics?apikey'));

    if (this.charId) {
      Observables.push(this.http.get(`${this.urlChar}${this.charId}${this.apiKey}`));
      Observables.push(this.http.get(`${this.urlChar}${this.charId}/comics${this.apiKey}`));
    }
    if (this.comicsId) {
      Observables.push(this.http.get(`${this.urlCom}${this.comicsId}${this.apiKey}`));
      Observables.push(this.http.get(`${this.urlCom}${this.comicsId}/creators${this.apiKey}`));
    }
    console.log([Observable, Observable]);
    return Observable.forkJoin(Observables);
  }
}
Run Code Online (Sandbox Code Playgroud)

//我的考试

import { async, ComponentFixture, TestBed, getTestBed, inject } from '@angular/core/testing';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { DataService } from './data.service';
import {
  BaseRequestOptions, Http, XHRBackend, HttpModule,
  Response, ResponseOptions, RequestMethod
} from '@angular/http';
import { Observable } from 'rxjs/Observable';

describe('DataService', () => {
  let …
Run Code Online (Sandbox Code Playgroud)

jasmine angular-http angular-services angular angular-test

8
推荐指数
1
解决办法
1102
查看次数

角度发送带有get(和其他)请求的令牌

出于某种原因,互联网缺乏关于如何在Angular 4中使用的示例(它使用TypeScript,它不允许您跳过包括选项属性,如它转换成的JavaScript).

我正试图点击我的团队的RESTful API,这需要一个带有GET请求的身份验证令牌,例如:

return this.http.get(this.BASE_URL + '/api/posts/unseen/all', {
            headers : {
                "Authorization": 'Token token="' + TokenService.getToken() + '"'
            }   
        })
Run Code Online (Sandbox Code Playgroud)

TokenService我写的业务服务类在哪里返回令牌以便在应用程序中使用.打字后,我得到了这个错误:

在此输入图像描述

我出现的服务文件中的依赖项是:

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';

import { Post } from '../models/post'; // business class 
import 'rxjs/';
import { User } from '../models/user'; // business class
import { HttpService } from './http.service'; // service for connecting us to the base location of the endpoints. provides BASE_URL to …
Run Code Online (Sandbox Code Playgroud)

angular-http angular

8
推荐指数
1
解决办法
1万
查看次数