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 垃圾回收机制分析
Oct 10 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
详解如何运行vue项目
Apr 15 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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
PHP+DBM的同学录程序(3)
2006/10/09 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Python异常处理机制结构实例解析
2020/07/23 Python
彻底解决Python包下载慢问题
2020/11/15 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
后勤人员自我评价怎么写
2013/09/19 职场文书
新闻编辑自荐信
2013/11/03 职场文书
企业厂长岗位职责
2013/12/17 职场文书
采购部主管岗位职责
2014/01/01 职场文书
新文化运动的口号
2014/06/21 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
消防演习通知
2015/04/25 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
Python学习开发之图形用户界面详解
2021/08/23 Python