angularjs请求数据的方法示例


Posted in Javascript onAugust 06, 2019

在 app.module.ts 中引入 HttpClientModule 并注入

import {HttpClientModule} from '@angular/common/http';
imports: [
 BrowserModule,
 HttpClientModule
]

Angular get 请求数据

在用到的地方引入 HttpClient 并在构造函数声明

import {HttpClient} from "@angular/common/http";
constructor(public http:HttpClient) { }

get 请求数据

var api = "http://a.itying.com/api/productlist";
this.http.get(api).subscribe(response => {
 console.log(response);
});

Angular post 提交数据

在用到的地方引入 HttpClient、HttpHeaders 并在构造函数声明 HttpClient

import {HttpClient,HttpHeaders} from "@angular/common/http";
constructor(public http:HttpClient) { }

post 提交数据

const httpOptions = {
 headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
var api = "http://127.0.0.1:3000/doLogin";
this.http.post(api,{username:'张三',age:'20'},httpOptions).subscribe(response => {
 console.log(response);
});

Angular Jsonp 请求数据

在 app.module.ts 中引入 HttpClientModule、HttpClientJsonpModule 并注入

import {HttpClientModule,HttpClientJsonpModule} from
'@angular/common/http';
imports: [
 BrowserModule,
 HttpClientModule,
 HttpClientJsonpModule
]

在用到的地方引入 HttpClient 并在构造函数声明

import {HttpClient} from "@angular/common/http";
constructor(public http:HttpClient) { }

jsonp 请求数据

var api = "http://a.itying.com/api/productlist";
this.http.jsonp(api,'callback').subscribe(response => {
console.log(response);
});

Angular 中使用第三方模块 axios 请求数据

安装 axios

cnpm install axios --save

用到的地方引入 axios

import axios from 'axios';
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});

封装service作为http服务

import { Injectable } from '@angular/core';
import axios from 'axios';
@Injectable({
 providedIn: 'root'
})
export class HttpserviceService {
 constructor() { }
 axiosGet(api){
   return new Promise((resolve,reject)=>{
    axios.get(api)
     .then(function (response) {
      // handle success   
      resolve(response)
     });
  })

 } 
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 #Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 #Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 #Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 #Javascript
浅入深出Vue之自动化路由
Aug 06 #Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 #Javascript
微信小程序3种位置API的使用方法详解
Aug 05 #Javascript
You might like
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
php while循环控制的简单实例
2016/05/30 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
prototype 学习笔记整理
2009/07/17 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
React 实现拖拽功能的示例代码
2019/01/06 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
python数据结构之二叉树的建立实例
2014/04/29 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
成教自我鉴定
2013/10/27 职场文书
公积金转移接收函
2014/01/11 职场文书
一岗双责责任书
2014/04/15 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
python井字棋游戏实现人机对战
2022/04/28 Python