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实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
微信小程序时间戳转日期的详解
Apr 30 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小技巧之函数重载
2014/06/02 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
vue 组件简介
2020/07/31 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Python docx库用法示例分析
2019/02/16 Python
详解Python_shutil模块
2019/03/15 Python
Python如何实现转换URL详解
2019/07/02 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
Django的Modelforms用法简介
2019/07/27 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
Python实现动态循环输出文字功能
2020/05/07 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
财务学生的职业生涯发展
2014/02/11 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
党员年终个人总结
2015/02/14 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis