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 相关文章推荐
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
js中的json对象详细介绍
Oct 29 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 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
MYSQL环境变量设置方法
2007/01/15 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
js实现简单模态框实例
2018/11/16 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
Python基础教程之异常详解
2019/01/10 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
安装PyInstaller失败问题解决
2019/12/14 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
市场营销专业个人求职信范文
2013/12/14 职场文书
5.1手机促销活动
2014/01/17 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
大学秋游活动方案
2014/02/11 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
万能检讨书2000字
2014/10/17 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
校运会新闻稿
2015/07/17 职场文书
办公室管理规章制度
2015/08/04 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python