d3.js - 使用 D3 v5 中的授权 header 获取 JSON 数据

Question

我正在处理 d3.js v5.8.2 中的一些图表，我想加载从需要授权 header 的 API 请求中获得的 JSON 数据。我试过类似的东西:

d3.json('url')
  .header("Authorization", "Bearer 7tsBVpsiYT")
  .get(function(error, data) {
    // callback
    console.log(data);
  });

我收到以下错误消息:

Uncaught TypeError: d3.json(...).header is not a function

Answer 1

由于 D3 v5 使用 Fetch API作为之前版本使用的 XMLHttpRequest 的替代品，d3.json() 的 API 需要稍作更改。来自文档:

# d3.json(input[, init]) <>

Fetches the JSON file at the specified input URL. If init is specified, it is passed along to the underlying call to fetch; see RequestInit for allowed fields.

您现在必须通过 RequestInit 对象传递 Authorization header ，该对象作为可选的第二个参数传递给 d3.json() .正如 Mike Bostock 在他的基本演示中所解释的 Fetch with Basic Auth这可以使用原生 Fetch API 来完成:

fetch("https://httpbin.org/basic-auth/user/passwd", {
  headers: new Headers({
    "Authorization": `Basic ${base64.encode(`${login}:${password}`)}`
  }),
}).then(response => {
  if (!response.ok) throw new Error(response.status);
  return response.json();
});

看source d3.json() 的人注意到，上面的代码基本上等同于 D3 在执行 d3.json 时在内部执行的操作。因此，代码可以改写为:

d3.json("https://httpbin.org/basic-auth/user/passwd", {
  headers: new Headers({
    "Authorization": `Basic ${base64.encode(`${login}:${password}`)}`
  }),
}).then(json => { /* do something */ });