angular4.0使用JSONP数据请求

ng4中有很多获取数据的API，为了满足跨域的需求，我选择JSONP模块；

应该有很多小伙伴遇到这个报错吧 injected script did not invoke callback；

下面我写个完整的demo来解决这个问题。

一、在app.module.ts模块中，注入JsonpModule模块

import {JsonpModule} from "@angular/http";

@NgModule({
    imports: [
        JsonpModule    //注入JSonpModule模块
    ]
})

 

二、创建服务httpService，并注入jsonp和map

import { Injectable } from '@angular/core';
import {Jsonp} from "@angular/http";    //注入Jsonp模块
import 'rxjs/add/operator/map';    //注入map

@Injectable()
export class HttpService {
  
}

 

三、拼接请求url，编写统一请求方法

这步最关键了，我们知道jsonp的请求地址是需要写callback回调参数的，用作script标签的id名；

就像下面的代码，至于为啥callback="__ng_jsonp__.__req0.finished"这样的形式；我也不是很明白。

let url1 = baseUrl + "&callback=" + "__ng_jsonp__.__req0.finished";
let url2 = baseUrl + "&callback=" + "__ng_jsonp__.__req1.finished";

 很明显，只要我们保证callback如上的结果，就可以正常的请求数据了，req0，req1……依次累加；

请求的核心代码是jsonp的subscribe方法，回调函数中返回数据，代码如下：

this.jsonp.get("请求地址").map(res => res.json()).subscribe(data => {
    // data为返回值
     console.log(data);
});

封装的完整httpService代码如下

static times = 0; 定义一个静态属性，用来记录httpSerivice服务的请求次数，每次请求就+1，这样保证每次请求的callback回调名都不一样；

import { Injectable } from '@angular/core';
import {Jsonp} from "@angular/http";
import 'rxjs/add/operator/map';

@Injectable()
export class HttpService {
  static times = 0;   // 用于记录jsonp请求的次数
  private baseUrl: string = 'http://q.letwx.com/api/jsapi';
  private sameKey: string = '&uid=' + Config.uid + '&wxapiopenid=' + Config.apiopenid + '&wxapitoken=' + Config.apitoken + '&debug=nf';
  public ACTION: any = {   // all action
    ACTLIST: 'schoolsign/teacher/actlist',   // 查看签到列表
    ACTINFO: 'schoolsign/teacher/actinfo',   // 查看签到信息
    STUADD: 'schoolsign/teacher/stuadd',  // 添加学生
    STULIST: 'schoolsign/teacher/stulist',   // 查看学生列表
    STUEDIT: 'schoolsign/teacher/stuedit',   // 编辑学生姓名
    STUDEL: 'schoolsign/teacher/studel',   // 删除学生
    ACTADD: 'schoolsign/teacher/actadd',   // 添加签到活动
  };

  constructor(
    private jsonp: Jsonp
  ) {}

  getJSON(action: string, params: object, cb?: any): any {
    let callback = "&callback=" + "__ng_jsonp__.__req" + HttpService.times + ".finished";
    HttpService.times ++;
    let url =  this.baseUrl + '?action=' + action + '&params=' + JSON.stringify(params) + this.sameKey + callback;
    this.jsonp.get(url).map(res => res.json()).subscribe(data => {
      cb && cb(data);
    });
  }
}

 

四、在app.module.ts模块中，注入服务httpService

@NgModule({
  imports: [
    JsonpModule
  ],
  providers: [
    HttpService
  ]
})

 

ok，有问题请留言吧！