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 pagination插件实现无刷新分页代码
Oct 13 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
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
2006/11/25 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
php开发工具有哪五款
2015/11/09 PHP
php实现搜索类封装示例
2016/03/31 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
化工专业推荐信范文
2013/11/28 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
解析Java中的static关键字
2021/06/14 Java/Android