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选择器使用详解
Apr 08 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 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
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
jQuery动画animate方法使用介绍
2013/05/06 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
python3.5安装python3-tk详解
2019/04/26 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
python制作朋友圈九宫格图片
2019/11/03 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
英国电器零售商:PRC Direct
2018/06/21 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
新郎婚礼答谢词
2015/01/04 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
交通事故代理词范文
2015/05/23 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
Django如何创作一个简单的最小程序
2021/05/12 Python
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python
Nginx配置使用详解
2022/07/07 Servers