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 相关文章推荐
JavaScript语句可以不以;结尾的烦恼
Mar 08 Javascript
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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中session变量的销毁
2014/02/27 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python自动创建Excel并获取内容
2020/09/16 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
安全生产责任书范本
2014/04/15 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
教师一帮一活动总结
2014/07/08 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
礼仪培训心得体会
2016/01/22 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
Java设计模式之代理模式
2022/04/22 Java/Android
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技