在Angular 11中进行同步HTTP调用
是一种通过HTTP协议与服务器进行通信的方式。同步HTTP调用是指在发送HTTP请求后，代码会等待服务器响应并返回结果后再继续执行后续代码。
在Angular中，可以使用HttpClient模块来进行同步HTTP调用。HttpClient模块提供了一组用于发送HTTP请求和处理响应的方法。
以下是在Angular 11中进行同步HTTP调用的步骤：
- 导入HttpClient模块：
- 导入HttpClient模块：
- 在组件的构造函数中注入HttpClient：
- 在组件的构造函数中注入HttpClient：
- 发送同步HTTP请求：
- 发送同步HTTP请求：
- 在上面的代码中，我们使用HttpClient的get方法发送了一个GET请求，并指定了响应的数据类型为JSON。使用toPromise方法将Observable转换为Promise，以便可以使用async/await语法进行同步调用。
- 处理响应：
- 处理响应：
- 在上面的代码中，我们使用try/catch语句块来处理请求的结果。如果请求成功，我们可以通过await关键字获取响应数据，并进行后续处理。如果请求失败，错误信息将被捕获并打印到控制台。
同步HTTP调用的优势是可以简化代码逻辑，使得异步操作更像同步操作。然而，同步调用可能会导致页面阻塞，影响用户体验，因此在实际开发中，建议使用异步HTTP调用。
同步HTTP调用的应用场景包括需要等待服务器响应后再执行后续操作的情况，例如需要获取某个资源的详细信息后再进行下一步操作。
腾讯云提供了一系列与云计算相关的产品，包括云服务器、云数据库、云存储等。具体推荐的产品和产品介绍链接地址可以参考腾讯云官方文档：https://cloud.tencent.com/document/product/213
请注意，以上答案仅供参考，具体的实现方式和推荐产品可能会根据实际需求和情况而有所不同。
相关·内容
我试着在angular中添加、删除和更新数据。我可以将数据添加到数组中。但是我无法更新和删除我的数据。
有人能告诉我怎么做删除和更新的HTTP调用吗？
这是我在组件和服务中的代码。
import { Component } from '@angular/core';
import { Observable} from 'rxjs';
import { FormsModule } from '@angular/forms';
import { Employee } from './employee';
浏览 0提问于2017-06-10得票数 0
1回答
我有一段代码
window.onbeforeunload = function (evt) {
//angular $http object
Rest.putInteraction({id:1}).then(function(){
//authorize the event to close window
});
};
当然，Javascript不会等待rest调用启动，而只是让页面在回调结束时卸载；因此，我无法在页面卸载之前发出所需的请求。
有没有办法暂停事件回调，等待rest promi
浏览 0提问于2016-02-18得票数 2
我正在创建一个带有一些操作的DataGrid模块，但是ng单击不会在添加$compile语句之后触发事件
模块
angular.module('powerGridAngular').service("powerGridContainer", function ($http, powerGridMethods) {
this.buildGrid = function (scope) {
return powerGridMethods.bindData(powerGridMethods.buildHeader(scope.options),
浏览 3提问于2016-09-13得票数 0
回答已采纳
我有一个angular应用程序，它使用$http服务从远程服务器获取数据。在某些情况下，我需要向每个请求追加一个自定义标头值，我希望使用来实现这一点。
出于安全原因，要添加的标头值是在angular应用程序的web服务器上计算的，这意味着requestTransform必须首先向应用程序web服务器发出请求以获取标头值，并将其添加到从远程服务器获取数据的$http请求中。
是否可以使用requestTransform执行此任务？或者，需要将我的数据获取调用封装在一个服务中，该服务在对远程服务器进行$http调用之前从应用程序web服务器获取标头值。
浏览 1提问于2013-05-21得票数 0
请您回答评论中的问题
class TextComp
{
result: string;
constructor() {
this.getdata().subscribe(result => {
console.log("result received");
this.result = result;
});
console.log("called before result received " + this.result);
//this.result is NULL/UNDEFI
浏览 5提问于2017-01-16得票数 1
1回答
我有一个非常基本的工厂服务，我想要单元测试。在$rootScope.$digest()语句和$rootScope.$apply()语句之前，我已经尝试过了，在单元测试中没有调用成功或失败的处理程序--但是在使用该工厂的控制器的上下文中，它们在应用程序中被调用得很好。
example.service.js:
(function (angular) {
'use strict';
angular
.module('exampleModule')
.factory('ExampleApi', ExampleApi);
E
浏览 3提问于2017-02-08得票数 0
回答已采纳
1回答
我创建了一个具有许多函数的提供程序，每个函数都向API服务器执行一个HTTP请求。我在创建提供者之后更新了app.module.ts。
我尝试将从api服务获得的数据返回到注入此提供程序的页面。
这是我的提供者：
import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
@Injectable()
export class LoginServicesProvider {
apiUrl: string = 'API URL COMES HERE&
浏览 2提问于2018-01-09得票数 1
回答已采纳
你好，我是从angular开始的，我不知道为什么这个没有任何帮助。 这很简单，我发出了一个get请求，我试图保存数据，但我做不到，我给你看了代码。 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.
浏览 25提问于2020-11-05得票数 0
我正在尝试在angular中设置一个e2e测试套件，并且需要使用$httpBackend返回封装的响应。如果我能返回一个文件内容就好了，例如
$httpBackend.whenPOST('/phones').respond(function(method, url, data) {
return getContentOf("/somefile");
});
我尝试使用$http，类似于
$httpBackend.whenPOST('/phones').respond(function(method, url, data) {
浏览 2提问于2014-01-11得票数 21
我用angular 5(最新版本)设置了一个新的应用程序，我遇到了以下错误：
Failed to set the 'responseType' property on 'XMLHttpRequest': The response type cannot be changed for synchronous requests made from a document.
如果需要，我可以提供代码，但错误已经发生在一个简单的：
this.http.get('https://google.com').subscribe(data => {
co
浏览 2提问于2018-03-01得票数 1
1回答
这就是密码：
import {
async,
inject,
TestBed
} from '@angular/core/testing';
import {
Http,
Response,
ResponseOptions,
RequestOptions,
BaseRequestOptions,
ConnectionBackend
} from "@angular/http";
import {MockBackend, MockConnection} from "@angular/http/testing";
浏览 2提问于2016-08-22得票数 1
回答已采纳
1回答
我打电话给一个服务部门的数据。我必须传入一个具有属性的对象来检索数据。据我所知，我正在正确地传递它，并且在控制台中没有收到任何错误，但是我分配给数据的对象是空的。我包括我的服务和组件，我要输出数据。
我使用相同的“有效载荷”值从Angular1应用程序调用完全相同的端点，并获得返回的数据对象。我肯定我错过了一些简单的东西。仍然习惯于角质2。
服务
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observab
浏览 0提问于2017-03-09得票数 0
回答已采纳
1回答
我已经开始玩AngularFire，在我的Firebase应用程序中获取数据遇到了一些困难。我正在为AngularJS和AngularFire/Firebase使用CDN。
这是JS：
var app = angular.module('VoteTrackerApp', ['firebase']);
app.constant('FIREBASE_URI', 'https://XXXXXXXXX.firebaseio.com/');
app.controller('VoteTrackerController',
浏览 2提问于2014-07-31得票数 1
回答已采纳
1回答
这是为$http模拟设置的吗？
由于某种原因，我得到了这个错误：
未登录错误:意外请求:获取http://
描述(‘DataService测试’，函数() {
var errorUrl = "/ErrorReturningURL";
var successUrl = "/SuccessReturningURL";
beforeEach(angular.mock.module('app'));
beforeEach(angular.mock.inject(function ($httpBackend) {
浏览 2提问于2014-01-28得票数 0
在angular中，我们使用HttpClient进行超文本传输协议调用，返回一个observable，如果我们想使用promises，我们可以使用lastValueFrom/firstValueFrom。
假设我们有：
async getLast() {
const get$ = this.http.get(url);
const res1 = await lastValueFrom(get$);
}
async getFirst() {
const get$ = this.http.get(url);
const res2 = await firstValueFrom
浏览 115提问于2021-10-19得票数 2
我正在通过Google加载博客提要，并将结果显示在组件中。我不知道如何将{ "items":[] }数组分配给posts变量以使posts显示。以下是我所拥有的：
构成部分：
import { Component, OnInit } from '@angular/core';
import { FeedService, Feed } from './feed.component.service';
import { Observable } from 'rxjs/Observable';
@Component({
selecto
浏览 2提问于2017-10-05得票数 6
回答已采纳
1回答
我有一个使用Angular 2和ag-grid的项目。
colDef = {column: 'name', filter: myFunction()}
public myFunction () {
http.get('params_doesn't matter').subscribe((response: any) => {
console.log('params work, everything is fine');
http.get({response.id}).subscribe((r
浏览 1提问于2018-01-18得票数 0
3回答
我正在做教程，这部分是关于实现登录，这应该会给出关于登录成功的气球
angular.module("app").value("mvToastr", toastr);
angular.module("app").factory("mvNotifier", function(mvToastr) {
return {
notify: function(msg) {
mvToastr.success(msg);
console.log(msg);
}
}
}
浏览 3提问于2014-03-06得票数 13
回答已采纳
我是angular的新手，我有以下问题
将响应值分配给我的服务的变量时，该变量在合唱控制台中显示为未定义
但在subscribe方法http中，该变量具有响应的赋值。
我不明白问题所在
@Injectable()
export class ControlService {
permissao: string;
constructor(
private httpConnection: HttpConnection,
private http: Http){}
getControl(){
浏览 0提问于2018-09-28得票数 0
我需要翻译值工厂。此工厂从服务器接收translateData。角度控制器调用convertValue函数。但是$http是异步方法，所以控制器得到的值是未定义值。因为尚未接收到http响应。
我想知道我是否可以工厂初始化完成(=从服务器下载数据)并按顺序创建控制器。
angular.module("app")
.factory("service", function ($http) {
var allDataMap = {};
$http({
method: 'GET',
url: '/
浏览 4提问于2018-11-02得票数 1
在我的角2项目中，我有以下类：
export class ApiEnvConf {
/**
* @type {Object}
*/
public _dev: {environnement: string, basePath: URL};
/**
* @type {Object}
*/
public _staging: {environnement: string, basePath: URL};
/**
* @type {Object}
*/
public _prod: {envi
浏览 2提问于2017-02-16得票数 1
3回答
我正在编写一个异步检索数据的服务($http或$resource)。我可以通过返回一个最初为空，但最终会填充的数组来隐藏它是异步的这一事实：
.factory('NewsfeedService1', ['$http', function($http) {
var posts = [];
var server_queried = false;
return {
posts: function() {
if(!server_queried) {
$http.get('json1.txt&
浏览 1提问于2013-07-02得票数 19
回答已采纳
我(新)用量角器做e2e黄瓜试验。我有一个基于angularJS的网络应用程序。我正在使用appium在一个真正的android设备上远程运行测试。下面是我使用的版本：
windows8.1
protractor@1.3.1 (with submodule selenium-webdriver@2.43.5)
appium@1.3.0beta1
android device with 4.4.4
我的量角器配置(摘录)，对应于
currentDeviceUDID = (...);
var appToTestURL = 'http://my.website.com:9000/app/in
浏览 0提问于2014-10-10得票数 6
回答已采纳
我想要创建一个角度服务，在“启动”时获取数据，并构建一个在应用程序的生命周期内不会改变的数组。我不想返回http请求的承诺。缓存结果仍然会导致“someExpensiveFunctionCall”的开销。处理这种情况的最佳方法是什么，它可以保证服务的结果将被填充，并且可以在控制器和/或其他服务中使用。
angular.module('app')
.service('MyService', function($http, defaults) {
var result = [];
$http.get('/some/url').then(fun
浏览 1提问于2014-09-21得票数 1
回答已采纳
在使用我的工厂/服务时，我很难保持两个控制器保持同步。
我已经(稍微缩小)
angular.factory('API', ['$http', function($http){
let self = this;
self.scans = [];
self.updateHistory = function (cb) {
return $http.get('/scanner/history').then(function(scans){
self.scans = scans.data
浏览 1提问于2017-02-06得票数 1
1回答
我正在与webpack模块联盟一起构建一个项目，设置如下：
响应主机(运行在localhost:3000上)
角遥控器1(运行在localhost:4201上)
角遥控器2(运行在localhost:4202上)
目标是使两个遥控器都能工作。如果我只运行其中一个，并删除另一个，它是完美的工作。
我面临的问题是，当加载遥控器时，__webpack_require__.p由一个远程脚本设置，因此另一个远程块从错误的url加载。
下面是我遇到的错误：
我的模块联合配置如下：
反应主机：
.
.
.
new ModuleFederationPlugin({
浏览 24提问于2022-10-11得票数 1
回答已采纳
目前我一直在尝试使用angular，我发现如何解决这个问题很困难，因为我在app.run()上运行一个$http方法。$http方法从服务器获取房间并在$rootScope.rooms变量中初始化它。在控制器中，我使用了这个房间变量。因为$http方法是异步的，有时会因为在方法完成之前加载的控制器而得到null。我正试着用另一种方式处理它。
game.js
angular.module('GameModule', [])
.run([function ("injectors...") {
$http.get("/rooms").succe
浏览 4提问于2014-12-18得票数 0
我试图使用角5中的HTTPClient进行api调用。我得到了以下错误：
DOMException: Failed to set the 'responseType' property on 'XMLHttpRequest': The response type cannot be changed for synchronous requests made from a document. at Observable._subscribe (http://cw.local/assets/js/dist/cw.angular.min.15229111
浏览 0提问于2018-04-05得票数 2
回答已采纳
2回答
我已经做了一些关于使用$http服务访问属性文件的回复，但现在确定它如何适合这个场景我已经创建了一个从poperties文件返回主机名的服务，该服务的调用客户端应该对该服务进行阻塞调用，并且只有在属性文件被读取时才能继续。
var serviceMod = angular.module('serviceModule',[])
.factory('configService', function($http){
return {
getValue: function(key){
$http.get("js/r
浏览 1提问于2015-10-03得票数 4
2回答
我有两个组成部分。users.components.ts和register.components.ts.users.components.ts显示一个用户表，register.components.ts是我们添加/编辑用户的地方。
当我们添加/编辑用户时，用户将通过users.components.ts ()被重定向回router.navigate()。但是，在刷新页面之前，用户表中不会看到更改。
这似乎是一个常见的问题，但我仍然找不到解决办法。这是我的密码
app-routing.module.ts
import { Routes, RouterModule } from '@ang
浏览 0提问于2019-08-05得票数 1
回答已采纳
我正在使用Angular2中的打字本。我订阅了来自http请求的响应，代码如下：
search(searchTerm): void {
this._webservice.getSearchResult(searchTerm).subscribe(results => this.results = results);
this.callThisMethod();
}
我想要做的是更新this.results的值，然后在变量更新后调用this.callThisMethod()。this.callThisMethod()被叫走了。如何使方法在变量更新后运行？
浏览 4提问于2016-05-31得票数 1
回答已采纳
我在客户端使用nodejs和socket.io和angularjs。我从互联网上拿起了angular-socketio示例，并在其中添加了disconnect方法。
套接字服务：
angular.module('app')
.factory('socket', ['$rootScope', function ($rootScope) {
var socket = io.connect();
return {
on: function (eventName, callback) {
socket.
浏览 3提问于2013-02-05得票数 5
回答已采纳
嗨，我正在跟踪，现在我无法从火炉实时数据库中删除一条记录。
(2018年6月11日更新) --之前我曾怀疑这个错误是在我使用FirebaseListObservable时出现的，但是事实证明这个错误在使用AngularFireList时也会发生。
使用AngularFireList
Runtime Error
_this.produkkuListRef.remove is not a function
这是一个具有删除功能的页面：
fleks-bisnis-produkku.module.ts
import { Component } from '@angular/core';
浏览 0提问于2018-06-09得票数 0
我为我正在开发的一个应用程序在Angular2中创建了一些与可观察功能相关的函数。但从那以后我就没用过角。因此，为了在Angular8中发挥作用，我必须相应地修改与可观察性相关的工作函数，而我无法消除一些错误消息。
来自服务器的API从数据库返回一个对象数组：
router.get('/getEntries, (req, res, next) => {
db.get().collection('data').find().toArray((err, data) => { res.json(data); });
});
问题可能在entry.servic
浏览 5提问于2019-11-07得票数 2
在我的Angular模块myApp上使用以下代码行时
myApp.config(function ($logProvider) {
$logProvider.debugEnabled(true);
});
我得到了这个错误：
Uncaught TypeError: Object #<$LogProvider> has no method 'debugEnabled' from myApp core.ts:6
(anonymous function) core.ts:6
invoke angular.js:2990
(anonymous function) a
浏览 6提问于2014-01-22得票数 1
我正在尝试创建一个方法，该方法在从API获取对象后返回对象数组。问题是，从工厂返回发生在所有调用完成之前。我已经尝试使用$q.defer，但它仍然在准备发布之前发送返回。这就是我到目前为止想出的方法。
angular.module('watchList').factory('storageService', ['$http', '$q', function ($http, $q) {
storage = {};
storage.getMovies = function () {
var movies = localSt
浏览 5提问于2017-03-04得票数 0
回答已采纳
我是Angular 2的新手，我正在使用最新的Angular 2 (RC5)，我想引入导航功能，它可以工作，但它不能加载默认选项(住院)我必须单击该选项，应用程序在菜单的不同选项之间导航，但我在控制台中遇到了问题：
EXCEPTION: Error: More tasks executed then were scheduled.
BrowserDomAdapter.logError @platform-browser.umd.js:937
platform-browser.umd.js:937 Error: More tasks executed then were scheduled.
浏览 7提问于2016-09-07得票数 1
回答已采纳
4回答
我在回送应用程序中重命名了许多模型和表，但是现在我必须迁移到这个模型定义。
我需要运行。它必须在dataSource对象上运行，但是文档没有提供有关获取其中之一的帮助。
到目前为止，我已经在/boot中创建了一个新脚本，其中包括：
var loopback = require('loopback');
var app = module.exports = loopback();
app.loopback.DataSource.automigrate()
但是这个数据源对象不包含autoMigrate函数.
我尝试过运行强循环弧来使用那里出现的自动迁移按钮，但是页面崩溃时出现了以
浏览 1提问于2016-10-13得票数 10
回答已采纳
1回答
我有一个服务叫两种方法和webapi。以下是实现：
geo.service.ts
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { CountryResponse
浏览 7提问于2022-12-04得票数 0
1回答
当使用Karma和Jasmine在Angular2+中运行测试，并订阅可观察对象时，订阅(据我所知)是异步运行的，因此测试应该包装到async或fakeAsync中。 但是我们不使用async，不使用fakeAsync，测试通过了，所以我的问题是：subscribe中的代码过去不是异步的吗？为什么测试通过了？怎么一回事？ hello.component.ts import { Component, Input, OnInit } from '@angular/core';
import {of} from 'rxjs';
@Component({
sel
浏览 21提问于2019-02-20得票数 0
回答已采纳
我正在使用windows上的Nativescript伙伴云构建来在iOS上测试我的应用程序--我还连接了我的iPhone。
根据的帖子，我将我的http请求发送到本地主机，但是它们总是失败，因为这个错误。
的Http失败响应:0未知错误
错误:无法连接到服务器。
这是我实施奖励服务的情况。
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable, of } from '
浏览 1提问于2019-05-15得票数 1
回答已采纳
1回答
我正在尝试创建一个NG应用程序，其中的部件可以动态启用/禁用。这个想法是有一个“管理”页面，其中的应用程序的部分可以启用或禁用，然后看到新的功能出现，在页面顶部的调整菜单的形式，并匹配路由，控制器等加载到应用程序中(我正在使用SocketStream w/ NG)。
第一步是动态添加/删除路由，我在找到了一个解决方案-据我所知，工作得很好。
接下来，添加菜单项到菜单栏-使用ng很容易-在ul/li项上重复。
因此，应用程序调整其菜单并识别相应的路线。到目前一切尚好。
注册控制器时会出现问题。我使用正确的参数调用myApp.controller('SandboxCtrl',[..
浏览 3提问于2013-01-22得票数 1
在我的应用程序中，我试图在应用程序启动时加载angular JS常量，方法是通过进行异步调用从json文件中读取数据，一旦代码命中异步调用，它就会继续执行其他操作，然后返回到.then代码块。
在angular JS中是否有等待停止执行直到异步调用结束？？
示例：
define(['app'], function (app) {
'use strict';
app.config(function ($provide) {
var serviceUrl=null;
var initInjector =
浏览 4提问于2014-05-12得票数 0
我正在使用angular 2开发一个聊天应用程序。
当用户关闭窗口时，如何向后台发送finish chat命令？
我的组件有一个方法，它通过以下方式调用后端服务来结束聊天
endChat() {
this.chatService.endChat(this.chatSessionInfo).subscribe(
result => this.OnGetMessages(result),
error => this.OnChatEndError(error)
);
}
如何在关闭窗口时执行
浏览 27提问于2016-08-17得票数 37
回答已采纳
目前，我在angular js2中遇到了关于登录认证的问题，因为我在下面的代码中遇到了关于异步的问题。
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { UserData } from './UserData';
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/toPromise'
浏览 0提问于2016-10-22得票数 3
todo.service.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
@Injectable()
export class TodoService {
public todos
constructor(private http:H
浏览 0提问于2017-03-06得票数 1
回答已采纳
我有一个Angular.js应用程序，它报告浏览器控制台中的错误：
Error: [$rootScope:inprog] $digest already in progress
请您告诉我如何找到触发此错误的代码吗？
更新：
这是我的堆栈跟踪：
Error: [$rootScope:inprog] $digest already in progress http://errors.angularjs.org/1.2.0-rc.3/$rootScope/inprog?p0=%24digest at http://localhost:3000/js/libs/angular.js/angu
浏览 3提问于2013-10-21得票数 3
我有一个身份验证类，我想返回一个true或false，但是使用可观察到的是异步，所以我不知道如何等待httpclient完成。
此时，对isLogin的调用将始终返回false。
import { Injectable } from '@angular/core';
import { HttpClient , HttpHeaderResponse, HttpHeaders, } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import &#
浏览 4提问于2017-11-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
