angularjs請求數(shù)據(jù)的方法示例
在 app.module.ts 中引入 HttpClientModule 并注入
import {HttpClientModule} from '@angular/common/http';
imports: [
BrowserModule,
HttpClientModule
]
Angular get 請求數(shù)據(jù)
在用到的地方引入 HttpClient 并在構(gòu)造函數(shù)聲明
import {HttpClient} from "@angular/common/http";
constructor(public http:HttpClient) { }
get 請求數(shù)據(jù)
var api = "http://a.itying.com/api/productlist";
this.http.get(api).subscribe(response => {
console.log(response);
});
Angular post 提交數(shù)據(jù)
在用到的地方引入 HttpClient、HttpHeaders 并在構(gòu)造函數(shù)聲明 HttpClient
import {HttpClient,HttpHeaders} from "@angular/common/http";
constructor(public http:HttpClient) { }
post 提交數(shù)據(jù)
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 請求數(shù)據(jù)
在 app.module.ts 中引入 HttpClientModule、HttpClientJsonpModule 并注入
import {HttpClientModule,HttpClientJsonpModule} from
'@angular/common/http';
imports: [
BrowserModule,
HttpClientModule,
HttpClientJsonpModule
]
在用到的地方引入 HttpClient 并在構(gòu)造函數(shù)聲明
import {HttpClient} from "@angular/common/http";
constructor(public http:HttpClient) { }
jsonp 請求數(shù)據(jù)
var api = "http://a.itying.com/api/productlist";
this.http.jsonp(api,'callback').subscribe(response => {
console.log(response);
});
Angular 中使用第三方模塊 axios 請求數(shù)據(jù)
安裝 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服務(wù)
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)
});
})
}
}
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了AngularJS 指令的交互，這里整理了詳細的資料及實例代碼，有興趣的小伙伴可以參考下2016-09-09
Angular.Js之Scope作用域的學(xué)習(xí)教程
這篇文章主要給大家分享了關(guān)于Angular.Js之Scope作用域的學(xué)習(xí)教程 ,文中通過多個示例代碼介紹的非常詳細，相信對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要給大家介紹了關(guān)于前后端如何實現(xiàn)登錄token攔截校驗的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09
這篇文章主要為大家詳細介紹了Angular實現(xiàn)二級導(dǎo)航欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
angularjs學(xué)習(xí)筆記之完整的項目結(jié)構(gòu)
這篇文章主要介紹了angularjs學(xué)習(xí)筆記之完整的項目結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2015-09-09
使用ngView配合AngularJS應(yīng)用實現(xiàn)動畫效果的方法
這篇文章主要介紹了使用ngView配合AngularJS應(yīng)用實現(xiàn)動畫效果的方法,AngularJS是十分熱門的JavaScript庫,需要的朋友可以參考下2015-06-06
Angular.js中$resource高大上的數(shù)據(jù)交互詳解
這篇文章主要給大家介紹了關(guān)于Angular.js中$resource高大上的數(shù)據(jù)交互的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用angular.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起看看吧。2017-07-07
Angular 4根據(jù)組件名稱動態(tài)創(chuàng)建出組件的方法教程
組件是我們在學(xué)習(xí)angular中必不可少的一部分，下面這篇文章主要給大家介紹了關(guān)于Angular 4如何根據(jù)組件名稱動態(tài)創(chuàng)建出組件的相關(guān)資料，文中通過圖文與示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-11-11
angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動效果
這篇文章主要為大家詳細介紹了angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動效果的相關(guān)資料，angularjs modal模態(tài)框創(chuàng)建可拖動的指令，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了Angular6 正則表達式允許輸入部分中文字符的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09