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 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
JavaScript实现图片拖曳效果
Sep 08 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
Javascript异步执行不按顺序解决方案
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写的serv-u的web申请账号的程序
2006/10/09 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
JS location几个方法小姐
2008/07/09 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
three.js 入门案例详解
2018/01/23 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
python多重继承实例
2014/10/11 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
python图片合成的示例
2020/11/09 Python
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
幼儿园小班家长寄语
2014/04/02 职场文书
读书活动总结
2014/04/28 职场文书
就业协议书
2014/09/12 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
2019财务转正述职报告
2019/06/27 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis
Python中tqdm的使用和例子
2022/09/23 Python