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 相关文章推荐
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
详解vue-router 初始化时做了什么
Jun 11 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
Vue父组件监听子组件生命周期
Sep 03 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下常用正则表达式整理
2010/10/26 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
python写的ARP攻击代码实例
2014/06/04 Python
python杀死一个线程的方法
2015/09/06 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
庆祝儿童节标语
2014/10/09 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
财务经理岗位职责
2015/01/31 职场文书
水知道答案观后感
2015/06/08 职场文书
我的长征观后感
2015/06/09 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
放假通知怎么写
2015/08/18 职场文书
体育委员竞选稿
2015/11/21 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python