Question

9.1 Angular get 请求数据

Angular5.x 以后 get 、 post 和和服务器交互使用的是 HttpClientModule 模块。

1. 在 app.module.ts 中引入 HttpClientModule 并注入

import {HttpClientModule} from '@angular/common/http';

imports: [
  BrowserModule,
  HttpClientModule
]

2. 在用到的地方引入 HttpClient 并在构造函数声明

import {HttpClient} from "@angular/common/http";

constructor(public http:HttpClient) { }

3. get 请求数据

var api = "http://a.itying.com/api/productlist";

this.http.get(api).subscribe(response => {
console.log(response); });

9.2 Angular post 提交数据

Angular5.x 以后 get 、 post 和和服务器交互使用的是 HttpClientModule 模块。

1. 在 app.module.ts 中引入 HttpClientModule 并注入

import {HttpClientModule} from '@angular/common/http';

imports: [
  BrowserModule,
  HttpClientModule
]

2. 在用到的地方引入 HttpClient、HttpHeaders 并在构造函数声明 HttpClient

import {HttpClient,HttpHeaders} from "@angular/common/http";

constructor(public http:HttpClient) { }

3. post 提交数据

用 express 搭建一个 server

// package.json
{
  "dependencies": {
  "ejs": "^2.5.6",
  "express": "^4.15.3",
  "socket.io": "^2.0.3",
  "body-parser": "~1.17.1"
  }
}

// app.js 代码
var express = require('express');
var app=express();
var bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

/*express 允许跨域*/
app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By",' 3.2.1')
  if(req.method=="OPTIONS") res.send(200);
  else  next();
});

//app.use(express.static(path.join(__dirname, 'public')));

app.get('/',function(req,res){
res.send('首页');
})
app.post('/dologin',function(req,res){
console.log(req.body);
 res.json({"msg":'post 成功'});
})

app.get('/news',function(req,res){

//console.log(req.body);
res.jsonp({"msg":'这是新闻数据'});

})

app.listen(3000,'127.0.0.1',function(){
   console.log('项目启动在 3000 端口')
});

// angular 代码

doLogin() {
  
  // 手动设置请求类型
  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);
});
}

9.3 Angular Jsonp 请求数据

1. 在 app.module.ts 中引入 HttpClientModule、HttpClientJsonpModule 并注入

import {HttpClientModule,HttpClientJsonpModule} from '@angular/common/http';

 imports: [
  BrowserModule,
  HttpClientModule,
  HttpClientJsonpModule
]

3. 在用到的地方引入 HttpClient 并在构造函数声明

import {HttpClient} from "@angular/common/http";

constructor(public http:HttpClient) { }

3. jsonp 请求数据

// 接口支持 jsonp 请求
var api = "http://a.itying.com/api/productlist";

this.http.jsonp(api,'callback').subscribe(response => {
console.log(response); });

9.4 Angular 中使用第三方模块 axios 请求数据

1. 安装 axios

cnpm install axios --save

2. 用到的地方引入 axios

import axios from 'axios';

3. 看文档使用

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