@alicloud/fetcher-jsonp

@alicloud/fetcher 的底层 Promise 比较「纯」的 jsonp 实现，可以单独使用，返回为封装过的 JsonResponse 而非直接的数据。

何以「纯」？

url 需要使用者来拼接参数（跟原生的 fetch 类似）。

INSTALL

1tnpm i @alicloud/fetcher-jsonp -S

APIs

1import jsonp, {
2  EJsonpError,
3  JsonpOptions
4} from '@alicloud/fetcher-jsonp';
5
6jsonp(url, {
7  timeout, // 超时毫秒数，默认 5 秒（一般来说 JSONP 请求要求必须有超时时间）
8  charset,
9  jsonpCallback,
10  jsonpCallbackFunction,
11  signal // 和 fetch 一致
12});

如何 abort

参考 https://javascript.info/fetch-abort https://developer.mozilla.org/en-US/docs/Web/API/AbortController

1import jsonp from '@alicloud/fetcher-jsonp';
2
3function getAbortSignal(): AbortSignal | undefined {
4  if (!window.AbortController) { // IE 下都不支持，请 if 保护
5    return;
6  }
7  
8  const abortController = new AbortController();
9  
10  setTimeout(() => { // 这里是模拟的，实际场景中不会用 setTimeout
11    abortController.abort(); // 只有第一次调用有效
12  }, 200);
13  
14  return abortController.signal;
15}
16
17return jsonp(jsonpUrl, {
18  signal: getAbortSignal(),
19  timeout
20}).then(response => response.json());

请求被 Abort 只是形式上的 Abort，就像 timeout 一样，请求最终还是会继续（即使 DOM script 已经被移除）。 Abort 后得到的错误和原生的 AbortError 类似，其 name 属性为 AbortError。