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 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
javascript 面向对象编程基础 多态
Aug 21 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
屏蔽IE弹出"您查看的网页正在试图关闭窗口,是否关闭此窗口"的方法
Dec 31 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
通过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中使用与Perl兼容的正则表达式
2006/11/26 PHP
PHP提取中文首字母
2008/04/09 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
Python的迭代器和生成器使用实例
2015/01/14 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
学生手册家长评语
2014/02/10 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
redis数据结构之压缩列表
2022/03/21 Redis
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android