Trying to make fetch() happen

Hello,

I’m new to CF Workers and trying to follow examples on handling POST requests. I’ve written this function:
async function handlePostRequest(request) {
let body = await request.clone().text()
let cache = caches.default
let response = await cache.match( request )
if (!response){
console.log( “DEBUG: did not receive cached response=” + response )
response = await fetch( request )
if (response.ok) {
console.log( “DEBUG: response OK” )
waitUntil( cache.put( request, response.clone() ) )
} else {
console.log( “DEBUG: response not OK” )
}
} else {
console.log( “DEBUG: received cached response=” + response )
}
return( response )
}

Which produces this output:

It seems that response isn’t created at all and the function bails out without entering either the if nor the else. This is causing downstream issues because a response is expected to be returned.

I’ve seen fetch used like this in multiple examples so I’m feeling lost - any suggestions much appreciated.

Thanks!

Is this the complete code? There are at least three lines in your output which are not in your code, body isnt used anywhere, and waitUntil would throw an error as you need an event object to call it.

The following seems to compile at least

async function handlePostRequest(event, request)
{
	let body = await request.clone().text();
	let cache = caches.default;
	let response = await cache.match(request);

	if (!response)
	{
		console.log("DEBUG: did not receive cached response=" + response );
		response = await fetch(request);

		if (response.ok)
		{
			console.log("DEBUG: response OK");
			event.waitUntil(cache.put(request, response.clone()));
		}
		else
		{
			console.log("DEBUG: response not OK");
		}
	}
	else
	{
		console.log("DEBUG: received cached response=" + response );
	}

	return response;
}


addEventListener('fetch', event => {
	event.respondWith(handlePostRequest(event, event.request))
})

Hi Sandro,

Thank you for your reply.

The remaining code is just example code plus a call to the POST function:

async function handleRequest(request) {
if (request.method.toUpperCase() === ‘POST’) {
console.log( “DEBUG: Hello POST”)
handlePostRequest( request )
console.log( “DEBUG: handlePostRequest returned” )
}
const init = {
headers: {
‘content-type’: ‘text/html;charset=UTF-8’,
},
}
const response = await fetch(url, init)
const results = await gatherResponse(response)
return new Response(results, init)
}

addEventListener(‘fetch’, event => {
return event.respondWith( handleRequest(event.request) )
})

async function gatherResponse( response ) {
console.log( “DEBUG response=” + response )
}

I’ve re-tested with your suggestion and the behavior is unchanged; still no output from either debug response ok / not ok

Thanks again.

Alright, though there still seems to be something off.

  • Your original code should have thrown an error because it shouldnt have been able to execute waitUntil at all. Your output does not show such an error
  • Your output suggests that your asynchronous code does not properly work. It prints “handlePostRequest returned” before it prints “did not receive cached response”, which should not happen, assuming the promises are properly handled by async/await.

I placed the code I posted earlier at https://cloudflareworkers.com/#a37f038e2c5f53ae8177f49d5346149d:https://tutorial.cloudflareworkers.com and, while caching does not work because of the test environment, it seems to work as far as “response OK” is concerned, which does not seem to show up in your case.