Angular中处理Http请求

  • 使用HttpClient.get等方法进行http请求,一般都是返回的一个Observable,给上层进行订阅处理
  • 将响应转成响应的Model类,可以直接在HttpClient.get中指定,如果有特殊处理(比如只要响应中的一部分),那么可以在返回的Observable后继续使用pipe、map等方法结合lambda表达式进行处理,其中可以使用as来转换类型。
import { HttpClient, HttpErrorResponse, HttpParams } from ‘@angular/common/http‘;

@Injectable({
  providedIn: ‘root‘
})
export class XXX {
  constructor(
    private readonly http: HttpClient) { }

  getXXX(): Observable<ModelClass> {
    return this.http.get<ModelClass>("url").pipe(
      catchError((err) => this.handleError(err)));
  }

  getYYY(page: number = 0, size: number = 10): Observable<Array<ModelClass>> {
    const params = new HttpParams()
      .set(‘page‘, String(page))
      .set(‘size‘, String(size));
    return this.http.get<any>("url", { params }).pipe(
      map(response => response.assetList as Array<ModelClass>),
      catchError(err => this.handleError(err, of([] as Array<ModelClass>)))
    );
  }
}

原文地址:https://www.cnblogs.com/wyp1988/p/12574574.html

时间: 2024-10-09 23:08:13

Angular中处理Http请求的相关文章

angular 中的 http 请求

angular 中使用 http 请求的前提,需要引入 httpClientModule 模块 根模块中 app.module.ts: import { HttpClientModule } from '@angular/common/http' imports: [ BrowserModule, AppRoutingModule,   HttpClientModule ], 组件中: import { HttpClient} from '@angular/common/http' constr

angular中的$http请求跨域,采用CROS方式解决

anjular中的controller层$http服务,解决跨域请求. js书写: /**     * 采用CORS方式实现ajax跨域请求     */    $http({        method:"post", // 请求方式可以为post,也可以为get        params:"",        url:"http://localhost:8080/getArray", // 跨域请求的路径    }).success(  

angular 中使用 axios 发起 http 请求

angular 中使用 axios /** * 在angular 中引入第三方 http 模块的使用, 以 axios 为例 * 有两种使用方法:(本文使用Promise简单封装) * 一. 直接在要使用请求的组件中 import axios from 'axios', 调用: axios.get/ axios.post ... * 二. 封装成服务: *          1. 引入 axios: import axios from 'axios' *          2. 用 promis

Angular中的jsonp

1.一般我们使用Angualr中的jsonp值这样使用的:注入$http服务 这样使用jsonp的方式可以支持多数api,但是douban不支持无法使用 1 module.controller('InTheatersController',['$scope','$http', function($scope,$http){ 2 4 var doubanApiAddress = 'https://api.douban.com/v2/movie/in_theaters'; 5 6 /!*在angua

利用IdentityServer3在ASP.NET 5和Angular中实现OAuth2 Implicit Flow

(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:之前介绍过的IdentityServer3虽然是基于Katana开发的,不过同样可以托管在ASP.NET 5中运行.今天推荐的这篇文章就是介绍如何在ASP.NET 5和Angular中实现OAuth2的Implicit Flow验证的. IdentityServer之前介绍过,是一个功能完备的.NET开源OpenID Connect/OAuth 2.0框架.IdentityServer3是基于

Angular中的内置指令和自定义指令

NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减少DOM操作,实现数据绑定,与业务逻辑进行交互. How: 指令主要分为两种:内置指令和自定义指令,通过下面的例子,简单记录一下如何去使用. 内置指令 在官方API文档上罗列了很多指令,内置指令可以分为:普通指令 和 事件指令,他们都是作用于HTML之上的,通过添加属性的方式来实现的.简单看一下一些

angular中get方法URL无法正确传输

angular中get方法URL中带有%,传输到后台得到的是%25,多出来的25使得get获取失败. 其中的转换属于URL 编码(http://www.w3school.com.cn/tags/html_ref_urlencode.html). 初用angular,折腾了半天才找出一个折中的方法解决. get(url, config),一般我们把限制条件放入config中,get请求会把config中的条件和url进行拼接,也正是这个拼接导致一些意想不到的错误,干脆我们就直接将易错的config

高效利用Angular中内置服务

AngularJS中为我们提供了众多的内置服务,通过这些内置服务可以轻松的实现一些常用功能.下面对Angular中常用的内置服务进行一下总结. 1.$location服务 $location服务用于返回当前页面的URL地址,示例代码如下: var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absU

Angular中使用webpack

最近,在开发公司项目的时候,由于组件太多,发出请求太多,导致网站速度太慢,所以我们就有一种强烈的需求,那就是对开发的js进行打包.在对比了各种打包工具之后,最后我们选定了webpack.所以,在这一周除了研究了下如何跨域请求,最主要的时间都去研究webpack去了,虽然没有达到理想中的状态,但是基本的需求应该算是满足了,现在分享出来,希望对大家学习Angular有所帮助. 在正文之前,我先说下,我要分享的内容有: · webpack在Angular中使用 · 建立开发环境与生产环境 · 优化打包