码迷,mamicode.com
首页 > 其他好文 > 详细

angular2

时间:2017-04-04 23:08:04      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:跨域请求   url   ...   keyword   const   users   ram   str   set   

1、定义服务

import {Injectable} from "@angular/core";
import {Http, Jsonp} from "@angular/http";
import "rxjs/add/operator/map";
@Injectable()
export class HttpServer {
  constructor(public jsonp: Jsonp, public http: Http) {

  }
 /*
  *   url: 服务器api接口地址
  *   params: 传递参数对象
  */
  // get方法
  httpGet(url, params) {
    return this.http.get(url, {search: params}).map(res=>res.json);
  }
  // post方法
  httpPost(url, params) {
    return this.http.post(url, {search: params}).map(res=>res.json);
  }
  // 跨域请求
  jsonpGet(url, params) {
    return this.jsonp.get(url, {search: params}).map(res=>res.json());
  }
}

2、app.module.ts文件中引入服务

import {HttpServer} from "./http.server.ts";
...
providers: [HttpServer]
...

3、组件中使用服务获取数据

...
import {URLSearchParams} from "@angular/http";
...
// 使用服务
// 设置参数
var params = new URLSearchParams();
params.set("callback", "JSONP_CALLBACK");
// 调用jsonpGet方法,跨域请求数据
httpServer.jsonpGet("http://localhost:3000/users", params).subscribe(res=> {
  console.log(res);
});
1. 服务需要在constructor(public httpServer: HttpServer)参数中初始化, this.httpServer.httpGet()
2. 服务有两种引入方式,如果在全局引入,那么组件中还要引入文件路径,不用写,providers:[]

angular2

标签:跨域请求   url   ...   keyword   const   users   ram   str   set   

原文地址:http://www.cnblogs.com/zhangjinting/p/6666670.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!