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 相关文章推荐
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
JavaScript模块详解
Dec 18 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
通过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
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php rsa加密解密使用详解
2015/01/14 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
对django中render()与render_to_response()的区别详解
2018/10/16 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
Java面试笔试题大全
2016/11/23 面试题
餐厅经理岗位职责范本
2014/02/17 职场文书
工会换届选举方案
2014/05/21 职场文书
工业设计专业自荐书
2014/06/05 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
土地租赁意向书
2014/07/30 职场文书
售房协议书范本2014
2014/10/23 职场文书
学术会议通知
2015/04/15 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python
基于JavaScript实现省市联动效果
2021/06/22 Javascript
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers