Angular 数据请求的实现方法

使用 Angular 请求数据的时候，需要引入 HttpModule 模块，如果使用的 jsonp 模式的话，则需要另外引入 JsonpModule 模块

import { HttpModule, JsonpModule } from '@angular/http'

然后在当前模块中的 imports 内进行注册

imports: [
 HttpModule,
 JsonpModule
],

注册以后就可以在组件文件当中引入相对应的方法来进行数据请求了

import { Http, Jsonp } from '@angular/http'

然后在当前组件的构造函数当中进行注入以后就可以使用了

constructor(private http: Http, private jsonp: Jsonp) { }

使用如下，一个简单的 get 请求

// 进行注入，拿到相对应的方法
constructor(private http: Http, private jsonp: Jsonp) { }
public list: any = []
// 请求数据
getData() {
 let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
 let _this = this
 this.http.get(url).subscribe((data) => {
  _this.list = JSON.parse(data['_body'])['result']
  console.log(_this.list)
 })
}

前台进行渲染即可

<button (click)="getData()">get 请求数据</button>
<ul>
 <li *ngFor="let item of list">
  {{item.title}}
 </li>
</ul>

JSONP 请求数据

注意区分与 get 请求的区别，使用如下

// 请求数据
jsonpData() {
 let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK'
 let _this = this
 this.jsonp.get(url).subscribe((data) => {
  _this.list = data['_body']['result']
  console.log(_this.list)
 })
}
// 渲染
<button (click)="jsonpData()">jsonp 请求数据</button>
<ul>
 <li *ngFor="let item of list">
  {{item.title}}
 </li>
</ul>

不同点

请求的 url 参数结尾必须要添加指定的回调函数名称 &callback=JSONP_CALLBACK

请求的方式变为 this.jsonp.get(url)

请求后得到的数据格式不统一，需要自行进行调整

POST 请求

与 GET 的请求方式有些许不同，首先需要引入请求头 { Headers }

import { Http, Jsonp, Headers } from '@angular/http'

然后来对请求头进行定义，需要先实例化 Headers

private headers = new Headers({'Content-Type': 'application/json'})

最后在提交数据的时候带上 Headers 即可

postData() {
 let url = 'http://localhost:8080/login'
 let data = {
  "username": "zhangsan",
  "password": "123"
 }
 this.http.post(
  url,
  data,
  {headers: this.headers}
 ).subscribe((data) => {
  console.log(data)
 })
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • AngularJS基于http请求实现下载php生成的excel文件功能示例
  • angular2中Http请求原理与用法详解
  • ionic3+Angular4实现接口请求及本地json文件读取示例
  • angular.js4使用 RxJS 处理多个 Http 请求
  • Angular客户端请求Rest服务跨域问题的解决方法
  • 详解基于angular-cli配置代理解决跨域请求问题
  • 详解AngularJS用Interceptors来统一处理HTTP请求和响应
  • angular 用拦截器统一处理http请求和响应的方法
  • angularJS 发起$http.post和$http.get请求的实现方法
赞 (0)

相关推荐

  • angular.js4使用 RxJS 处理多个 Http 请求

    有时候进入某个页面时,我们需要从多个 API 地址获取数据然后进行显示.管理多个异步数据请求会比较困难,但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能.处理多个请求有多种方式,使用串行或并行的方式. 基础知识 mergeMap mergeMap 操作符用于从内部的 Observable 对象中获取值,然后返回给父级流对象. 合并 Observable 对象 const source = Rx.Observable.of('Hello'); //map t

  • Angular客户端请求Rest服务跨域问题的解决方法

    Angular客户端请求Rest服务跨域问题的解决方法

    1.问题描述:通过Origin是http://localhost:4200请求http://localhost:8081的服务,控制台报错如下,但是Response为200.客户端和服务端IP相同,但是端口不同,存在跨域问题. 复制代码 代码如下: XMLHttpRequest cannot load http://localhost:8081/api/v1/staffs. No 'Access-Control-Allow-Origin' header is present on the req

  • angular2中Http请求原理与用法详解

    本文实例讲述了angular2中Http请求原理与用法.分享给大家供大家参考,具体如下: 提供HTTP服务 HttpModule并不是Angular的核心模块. 它是Angular用来进行Web访问的一种可选方式,并位于一个名叫@angular/http的独立附属模块中. 编辑app.module.ts import { HttpModule, JsonpModule } from '@angular/http'; @NgModule({ imports: [ HttpModule, Jsonp

  • 详解基于angular-cli配置代理解决跨域请求问题

    详解基于angular-cli配置代理解决跨域请求问题

    1.跨域请求产生 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份数据接口,我们可以定制开发多个版本. 而前后端分离带来的一个问题就是前端web部署的服务器和后端提供服务的服务器大概率不在同一个域名下,进而会产生跨域问题. 2.通用解决方案 如果浏览器支持HTML5,那么就可以一

  • angularJS 发起$http.post和$http.get请求的实现方法

    AngularJS发起$http.post请求 代码如下: $http({ method:'post', url:'post.php', data:{name:"aaa",id:1,age:20} }).success(function(req){ console.log(req); }) 这时候你会发现收不到返回的数据,结果为null,这是因为要转换成form data. 解决方案: 配置$httpProvider: var myApp = angular.module('app',

  • 详解AngularJS用Interceptors来统一处理HTTP请求和响应

    Web 开发中,除了数据操作之外,最频繁的就是发起和处理各种 HTTP 请求了,加上 HTTP 请求又是异步的,如果在每个请求中来单独捕获各种常规错误,处理各类自定义错误,那将会有大量的功能类似的代码,或者使用丑陋的方法在每个请求中调用某几个自定义的函数来处理.这两种方法基本都不是靠谱之选.好在 AngularJS 提供了 Interceptors --拦截战斗机--来对应用内所有的 XHR 请求进行统一处理. 主要功能 Interceptors 有两个处理时机,分别是: 其它程序代码执行 HT

  • ionic3+Angular4实现接口请求及本地json文件读取示例

    ionic3+Angular4实现接口请求及本地json文件读取示例

    一 准备工作 首先,ionic3+Angular4的开发环境你得有,这里就不赘述.环境准备好,创建一个空白项目,模板自选. 二 实现过程 1 新建json文件和service service记得在app.module.ts中引用 json和service 2 json文件格式 格式类似这样,根据实际需求决定. [ { "id":"1", "name":"xiehan", "age":"24&quo

  • AngularJS基于http请求实现下载php生成的excel文件功能示例

    本文实例讲述了AngularJS基于http请求实现下载php生成的excel文件功能.分享给大家供大家参考,具体如下: 使用PHPExcel插件的同学们都知道,导出excel是直接将生成内容修改content-type来将内容作为文件下载的,这时候需要页面上有一个url,通过点击来下载. 那么问题来了,如果在生成excel时有请求参数,只能通过js的http请求,这时候怎么下载呢? 研究了一下,有以下几种方式: 1. angularjs创建a标签模拟下载 // 创建a标签模拟下载 functi

  • angular 用拦截器统一处理http请求和响应的方法

    想使用angularjs里的htpp向后台发送请求,现在有个用户唯一识别的token想要放到headers里面去,也就是{headres:{'token':1}} index.html里引入以下js: angular.module('app.factorys',[]) .factory('httpInterceptor',['$q','$injector','$localStorage',function ($q,$injector,$localStorage) { var httpInterc

  • Angular 数据请求的实现方法

    使用 Angular 请求数据的时候,需要引入 HttpModule 模块,如果使用的 jsonp 模式的话,则需要另外引入 JsonpModule 模块 import { HttpModule, JsonpModule } from '@angular/http' 然后在当前模块中的 imports 内进行注册 imports: [ HttpModule, JsonpModule ], 注册以后就可以在组件文件当中引入相对应的方法来进行数据请求了 import { Http, Jsonp }

  • Angular网络请求的封装方法

    很多时候,我很喜欢angular的编码风格,特别是angular支持typescript之后,完整的生命周期,完美的钩子函数,都是别的语言所无法替代的. 这里我来说说我自己的网络请求封装,某种意义上来说,angular自己的网络请求封装的很好的,我们没有必要再来画蛇添足,但是,可能是我有那么一点点的代码洁癖吧,喜欢自己的风格样式,所以就有了这一点多余的东西. Angular的网络请求 这里是angular自己的网络请求. url代表网络请求地址, param网络请求参数 网络请求配置,例如:请求

  • Angular中的请求拦截的方法

    Angular中的请求拦截的方法

    目录 区分环境 添加拦截器 验证 在上一篇的文章Angular 中使用 Api 代理,我们处理了本地联调接口的问题,使用了代理. 我们的接口是单独编写的处理的,在实际的开发项目中,有众多的接口,有些需要登陆凭证,有些不需要.一个一个接口处理不妥,我们是否可以考虑对请求进行拦截封装呢? 本文章来实现下. 区分环境 我们需要对不同环境下的服务进行拦截.在使用 angular-cli 生成项目的时候,它已经自动做好了环境的区分,在 app/enviroments 目录下: environments ├

  • AJAX跨域请求数据的四种方法(实例讲解)

    由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP");  记住要进行兼容处理哦  在这里我就不写了 通过该对象进行获取 获取数据的四种状态  xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请

  • Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据

    一.WebService.asmx 处理业务数据,在GetWhether方法中产生天气情况数据,供JqueryRequest.aspx调用,代码如下: 复制代码 代码如下: [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { public WebService () { //如果使用设计的组件,请取消注释以下行 //InitializeCompo

  • 使用sql server management studio 2008 无法查看数据库,提示 无法为该请求检索数据 错误916解决方法

    使用sql server management studio 2008 无法查看数据库,提示 无法为该请求检索数据 错误916解决方法

    今日使用时代互联的海外空间,sql 2008 无限空间大小,开通账户后,使用sql server management studio 2008 连接数据库,可以链接上,但是无法查看自己的数据库,点击数据库后,提示 无法为该请求检索数据 错误916 解决方法如下 1:点击左侧的数据库,然后到右侧的 "名称"  上面点击右键   出来如图所示的菜单,取消掉策略运行状态和排序规则,再次点击数据库的时候,就能显示所有的数据库以及你自己的数据库了.

  • 基于Python的Post请求数据爬取的方法详解

    为什么做这个 和同学聊天,他想爬取一个网站的post请求 观察 该网站的post请求参数有两种类型:(1)参数体放在了query中,即url拼接参数(2)body中要加入一个空的json对象,关于为什么要加入空的json对象,猜测原因为反爬虫.既有query参数又有空对象体的body参数是一件脑洞很大的事情. 一开始先在apizza网站 上了做了相关实验才发现上面这个规律的,并发现该网站的请求参数要为raw形式,要是直接写代码找规律不是一件容易的事情. 源码 import requests im

  • vue axios数据请求get、post方法及实例详解

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下. import axios from 'axios' 引入之后我们就可以进行数据请求了,在methods中创建一个方法 methods:{ getInfo(){ let url = "url" axios.get(url).then((r

  • vue axios数据请求及vue中使用axios的方法

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: -------------------------------------------------------------------------------- •从浏览器中创建 XMLHttpRequest •从 node.js 发出 http 请求 •支持 Promise API •拦截请求和响应 •转换请求和响应数据 •取消请求 •自动转换JSON数据 •客户端支

  • 在Angular中使用JWT认证方法示例

    本文介绍了在Angular中使用JWT认证方法示例,分享给大家,具体如下: 项目地址: grading-system 基于session的认证和基于token的认证的方式已经被广泛使用.在session认证中,服务端会存储一份用户登录信息,这份登录信息会在响应时传递给浏览器并保存为Cookie,在下次请求时,会带上这份登录信息,这样就能识别请求来自哪个用户. 在基于session的认证中,每个用户都要生成一份session,这份session通常保存在内存中,随着用户量的增加,服务端的开销会增大

随机推荐