使用 D3 v5 中的授权标头提取 JSON 数据

Question

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

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

我收到以下错误消息：

未捕获的类型错误： d3.json(...(.标头不是函数

Answer 1

由于 D3 v5 使用 Fetch API 作为以前版本使用的XMLHttpRequest的替代品，因此需要稍微更改一下d3.json()API 的 API。从文档中：

#d3.json(input[，init]( <>

提取指定输入URL 处的 JSON 文件。如果指定了init，则将其传递给底层调用以获取;有关允许的字段，请参阅请求初始化。

现在，您必须通过RequestInit对象传递Authorization标头，该对象作为可选的第二个参数传递给d3.json()。正如Mike Bostock在他的基本演示Fetchwith 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();
});

查看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 */ });