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 相关文章推荐
初识Node.js
Sep 03 Javascript
深入探寻javascript定时器
Jan 02 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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版微信小店接口开发实例
2016/11/12 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
python中dir函数用法分析
2015/04/17 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Python内置函数locals和globals对比
2020/04/28 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
中学生期末评语
2014/02/03 职场文书
2015年元旦活动总结
2014/05/09 职场文书
廉政教育的心得体会
2014/09/01 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
党员自评材料范文
2014/12/17 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
学习计划是什么
2019/04/30 职场文书
导游词之山东八大关
2019/12/18 职场文书
JS实现简单九宫格抽奖
2022/06/28 Javascript