angularjs请求数据的方法示例

在 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)
     });
  })

 }
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

(0)

相关推荐

  • Angular 数据请求的实现方法

    使用 Angular 请求数据的时候,需要引入 HttpModule 模块,如果使用的 jsonp 模式的话,则需要另外引入 JsonpModule 模块 import { HttpModule, JsonpModule } from '@angular/http' 然后在当前模块中的 imports 内进行注册 imports: [ HttpModule, JsonpModule ], 注册以后就可以在组件文件当中引入相对应的方法来进行数据请求了 import { Http, Jsonp }

  • 在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

    第一步 准备好api接口地址, 例如 https://api.example.com/api/ 第二步 在根组件 app.components.ts 中引入 HttpClientModule 模块. // app.components.ts import {HttpClientModule} from "@angular/common/http"; //引入HttpClientModule 模块 imports: [ BrowserModule, AppRoutingModule, H

  • angularjs请求数据的方法示例

    在 app.module.ts 中引入 HttpClientModule 并注入 import {HttpClientModule} from '@angular/common/http'; imports: [ BrowserModule, HttpClientModule ] Angular get 请求数据 在用到的地方引入 HttpClient 并在构造函数声明 import {HttpClient} from "@angular/common/http"; construct

  • vue.js实现请求数据的方法示例

    vue2.0示例代码如下: var vm = new Vue({ el:"#list", data:{ gridData: "", }, mounted: function() { this.$nextTick(function () { this.$http.jsonp('http://***.com').then(function(res) { console.log(res.data) this.gridData = res.data; }) }) }, })

  • vue keep-alive请求数据的方法示例

    背景 index页面:首页品牌入口 list页面:商品列表页面 product页面:商品详情页面 从index页面进入list的时候要刷新页面,从product页面返回list的时候不需要刷新页面,所以list使用了keep-alive的属性,keepAlive设置为true,但是开发过程中发现一个问题,从product返回到list的时候,列表页面不是正确的品牌列表,而是之前一次点击的品牌列表.由于每个人遇到关于keep-alive请求数据不正确的问题不同,这里就直接说我的解决办法.希望能给大

  • ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】

    本文实例讲述了ThinkPHP框架实现导出excel数据的方法.分享给大家供大家参考,具体如下: 在ThinkPHP框架下,导出excel数据的方法示例: 在操作前,应该在系统框架的扩展目录中添加ORG库,即要包含ThinkPHP\Extend\Library\ORG\Util\PHPExcel.class.php文件及其相关支持文件. <?php header("Content-type: text/html; charset=utf-8"); class MesTestAct

  • vue中promise的使用及异步请求数据的方法

    下面给大家介绍vue中promise的使用 promise是处理异步的利器,在之前的文章<ES6之promise>中,我详细介绍了promise的使用, 在文章<js动画实现&&回调地狱&&promise>中也提到了promise的then的链式调用, 这篇文章主要是介绍在实际项目中关于异步我遇到的一些问题以及解决方法,由此来加深对promise的进一步理解. 背景 进入商品页,商品页的左侧是分类,右侧是具体的商品,一旦进入商品页,就把所有分类的商品

  • Python3 利用requests 库进行post携带账号密码请求数据的方法

    如下所示: import urllib,json,requests url = 'http://127.0.0.1:8000/account/login' headers = {} data = {'username':'asd','pwd':'123456$'} request = requests.post(url=url, data=data,json=True,headers=headers) response = request.content.decode() #需要携带请求头信息的

  • js利用递归与promise 按顺序请求数据的方法

    问题:项目中有一个需求,一个tabBar下面如果没有内容就不让该tabBar显示,当然至于有没有内容,需要我们通过请求的来判断,但是由于请求是异步的,如何让请求按照tabBar的顺序进行? 方案:我们可以将promise变成下一个请求,可以利用递归来实现 实施: //定义初始数据 requestlist就像tabBar列表 let requestlist = [1, 2, 3, 4, 5, 6, 7,8,9]; //每个tabBar的返回数据使用reslist装起来 let reslist =

  • PHP以json或xml格式返回请求数据的方法

    无论是网页还是移动端,都需要向服务器请求数据,那么作为php服务端,如何返回标准的数据呢? 现在主流的数据格式无非就是json和xml,下面我们来看看如何用php来封装一个返回这两种格式数据的类 我们先定义一个响应类 class response{ } 1.以json格式返回数据 json格式返回数据比较简单,直接将我们后台获取到的数据,以标准json格式返回给请求端即可 //按json格式返回数据 public static function json($code,$message,$data

  • 在python中使用requests 模拟浏览器发送请求数据的方法

    如下所示: import requests url='http://####' proxy={'http':'http://####:80'} headers={ "Accept":"text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8", "Accept-Encoding": "gzip, deflate, br", "Accept-Lang

  • Android开发之HttpClient异步请求数据的方法详解【附demo源码下载】

    本文实例讲述了Android开发之HttpClient异步请求数据的方法.分享给大家供大家参考,具体如下: 前面一篇Android开发笔记之:AsyncTask的应用较为详细的讲述了Asynctask的原理与应用,这里来结合使用一下HttpClient与Asynctask~ 代码编写如下: 服务器代码我就不写出来了,就是一个用户名和密码~ 1.写一个类HttpClientUtil,来实现HttpClient对象的创建并且返回HttpResponse对象 public class HttpClie

随机推荐