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，有問題請留言吧！