The fetch api

There are two things that caught me by surprise in the fetch api that aren’t mentioned in the documentation

  • Only https is supported (this is unfortunate for any localhost usage)
  • The request is cached and it’s unclear for how long and how to prevent this (other than the super hacky appending of #${Math.random()})
1 Like

@Kilian A small suggestion: you could use ngrok to create a secure introspectable tunnel to localhost

Actually, I think Kilian did use ngrok in his demo at our XD plugin event in Amsterdam :slight_smile:

I did, it’s super useful! It’s not really something you could/should ship as part of an XD integration though.

The fetch documentation should also mention it won’t work with binary results like graphics.

I believe you can use 127.0.0.1 with regular http, even though localhost requires https. This is all based on the macOS App Transport Security feature, which by default blocks most insecure communications over the network. Why it applies that to localhost as well is a mystery to me, but I believe using the loopback IP address directly should get around it.

@kerrishotts, do you have any info on the other questions regarding caching and binary responses? I could swear we do support using fetch() to retrieve binary data…

1 Like

I haven’t though to try using the loopback IP address… that would be a nice workaround.

As to SSL support, I know this will seem a distinction without a difference, but the API we built has no inherent restrictions on accessing insecure resources. Rather, it’s the host environment (macOS w/ ATS) that’s enforcing those restrictions. IIRC (and something to be careful of) Windows should access insecure resources without complaint.

For caching, it’s important to note that we use the OS’s networking APIs for XHR & Fetch. For example, on macOS, we use NSURLSession, which has a cache by default. It’s supposed to respect your response headers, so you should be able to configure your endpoint to expire the cache more frequently. (Let us know if this doesn’t hold, though.)

Finally, for binary data, we do support this, but not via FormData or Blobs yet. Instead, you have to use ArrayBuffer. Both FormData and Blob support is coming soon.

I have some feedback as well. In some places the docs have helpful examples:

https://adobexdplatform.com/plugin-docs/tutorials/how-to-make-network-requests/

But for fetch I don’t see any examples and what I’ve tried I can’t get to work,

I’m attempting to get localhost (check that it’s running):

function testServerPath() {
	var serverPath = "http://localhost/";

	if (serverPath==null || serverPath=="") {
		return;
	}

	fetch(serverPath).then(function(response) {
		console.log("Response: ", response)
	});
}

If http is not supported (only https) shouldn’t it error out? Tested https://www.google.com and it responds but nothing from http://www.google.com.

Update:
http://127.0.0.1 does respond when a server is running

Update 2:
Didn’t have catch on fetch but in the docs it says that it shouldn’t matter.

The fetch specification differs from jQuery.ajax() in two main ways:

  • The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.
fetch(serverPath).then(function(response) {
	log("Response: ", response)
}).catch(function(error) { 
	log("Error occurred", error); // TypeError: Network request failed
})

So if someone was to check for localhost running on http what should they do? I can create another question.

Note: I’ve turned my local server on and off and I’m checking using fetch with a url of http://127.0.0.1 and it’s still responding in both cases but visiting it in the browser it will report:

127.0.0.1 refused to connect.

when the server is turned off and load the home page when it is running.