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 DOM操作实例
Mar 05 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
AngularJS实现路由实例
Feb 12 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
JS数据类型分类及常用判断方法
Nov 19 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函数(简单整理)
2010/04/30 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
对比分析json及XML
2014/11/28 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
python字典多条件排序方法实例
2014/06/30 Python
深入理解Django的自定义过滤器
2017/10/17 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
零基础学python应该从哪里入手
2020/08/11 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
保护黄河倡议书
2014/05/16 职场文书
单位单身证明样本
2014/10/11 职场文书
保卫工作个人总结
2015/03/03 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
植树节新闻稿
2015/07/17 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
赡养老人协议书范本
2015/08/06 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
各国货币符号大全
2022/02/17 杂记
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL