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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
vue-router 学习快速入门
Mar 01 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 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
php对数组排序的简单实例
2013/12/25 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
Python函数返回值实例分析
2015/06/08 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
开放系统互连参考模型
2016/06/29 面试题
药学专业大学生自荐信
2013/09/28 职场文书
行政经理的岗位职责
2013/11/23 职场文书
竞聘书格式及范文
2014/03/31 职场文书
导游个人求职信
2014/04/25 职场文书
战友聚会策划方案
2014/06/13 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS