Angular 12 HttpClient jsonp如何传递自定义callback参数

Angular 内置的HttpClient.jsonp方法的第二个参数仅用于指定回调参数的键名，回调参数的值会默认生成ng_jsonp_callback_{序号}格式的唯一字符串，避免多个jsonp请求同时发起时全局函数名冲突，原生设计不支持直接传入固定的回调值。如果你的后端要求必须使用固定回调值，可以通过手动构造请求的方式实现，具体实现代码如下：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class GeolocationService {
  constructor(private httpClient: HttpClient) {}

  getLocation(): Observable<any> {
    // 自定义回调参数的键名和值
    const callbackKey = 'callback';
    const callbackValue = 'callback';
    const requestUrl = `https://geolocation-db.com/jsonp?${callbackKey}=${callbackValue}`;

    return new Observable(observer => {
      // 挂载全局回调函数
      (window as any)[callbackValue] = (resData: any) => {
        observer.next(resData);
        observer.complete();
        // 请求完成后清理全局挂载的函数，避免内存泄漏
        delete (window as any)[callbackValue];
      };

      // 发起get请求获取jsonp返回的JS代码并执行
      this.httpClient.get(requestUrl, { responseType: 'text' }).subscribe({
        next: (resText) => {
          // 执行返回的JS代码，触发挂载的全局回调
          new Function(resText)();
        },
        error: (err) => {
          // 出错时也需要清理全局函数
          delete (window as any)[callbackValue];
          observer.error(err);
        }
      })
    })
  }
}

注意事项 #

• 该方案仅适用于后端强制要求固定回调值的特殊场景，常规场景下优先使用Angular原生jsonp方法，自动生成的唯一回调值可以避免全局作用域污染和回调冲突问题
• 必须在请求结束、请求出错两个场景都清理挂载到window对象上的全局函数，避免内存泄漏

内容的提问来源于stack exchange，提问作者Dinesh