Problems using suggested authentication script

WaniKani API And Third-Party Apps
1

I have used the suggested script with my token and changed the endpoint path
but I keep getting an error of Headers is not defined
Any suggestions appreciated

var apiToken = ‘<api_token_here>’;
var apiEndpointPath = ‘<api_endpoint_here>’;
var requestHeaders =
new Headers({
Authorization: 'Bearer ’ + apiToken,
});
var apiEndpoint =
new Request(‘https://api.wanikani.com/v2/’ + apiEndpointPath, {
method: ‘GET’,
headers: requestHeaders
});

fetch(apiEndpoint)
.then(response => response.json())
.then(responseBody => console.log(responseBody));

2

Headers is part of the Fetch API – if you’re trying to do this in a node environment rather than the browser you’ll need another library (like node-fetch).

1 Like
3

Actually, since v17.5 Node does include the Fetch API

2 Likes
4

Sadly, LTS is stil v16.

2 Likes
5

Yeah, the LTS versions are always those with even numbers. And this is indeed to be taken seriously: Recently a coworker of mine accidentally upgraded our project to node 17 instead of 16, and all hell broke loose :flushed:

7 Likes
6

I only use node for running tests. Node 17 should be stable enough for that use, but it seems like I still spend more time debugging infrastructure stuff (polyfills and whatnot) than I do writing code or tests (not that I’ve done much of either for the past couple months).

Hopefully, Node 18 going LTS on 10/25 will alleviate some of the pain (but I’m not holding my breath).

2 Likes
7

If you are using Node, I suggest using nvm (or similar for Windows), so that you can have both LTS and >= 17.5.

About the Authorization header, it can be set inside fetch function.

Personally I use axios and axios-rate-limit (60 requests per min), and Node 14. I still have nvm for no real reason.

1 Like
8

I agree about axios. I like the API better and it’s much easier to have your code run the same across different platforms. I just hate loading extra libraries for simple little scripts, though. Dunno how much “tree shaking” is possible with axios.

I was honestly shocked once I started toying with front end development. The old “write once, doesn’t run anywhere” joke was originally about Java. That’s about the ONLY thing Java and JavaScript have in common other than the first four letters!

1 Like
9

I believe tree-shaking is actually a Webpack feature, and only some libraries will support it. axios is probably not one of them, but axios is well-tested.

Still, installing node-fetch (or using newest Node) isn’t really a bad thing, other than, everything will passthrough fetch even if it is status 404, 429, or 500. Testing is OK with fetch, with some laziness - await fetch(url, { headers }).then(r => r.json()). It’s possible to test for r.ok or write a fetch wrapper, but actually it just makes the code clunkier. (Also opinionated and reflect your coding skills.)

BTW, Deno also supports fetch, although, just like ESM, many features I used to are lost, like __dirname.

There are places I need Node 12, for some abandoned projects, like Gitbook - the current Gitbook became a paid web service instead.

As you are getting technical (into the coding mess), anyway; you should learn a proper markdown syntax, in particular, ```.

So a proper answer (albeit not testing for r.ok) would be,

fetch('https://api.wanikani.com/v2' + apiEndpointPath, {
  headers: {
    Authorization: 'Bearer ' + apiToken
  }
})
  .then(response => response.json())
  .then(responseBody => console.log(responseBody))

I omitted Content-Type of application/json, but it doesn’t appear to matter.

Note that ```js is broken in Discourse (WaniKani Community) 
fetch('https://api.wanikani.com/v2' + apiEndpointPath, {
  headers: {
    Authorization: 'Bearer ' + apiToken
  }
})
  .then(response => response.json())
  .then(responseBody => console.log(responseBody))

Syntax highlighting is now lost.

Though, it (defining the language) is needed for syntax highlighting in Discord, and Github, if you get to use them. (Also, of course, it is a standard markdown syntax.)

About your errors, global objects in Node and web browser, are vastly different, like Headers is not included (if not having Fetch API, I guess).