Develop Reference

timeoutSignal not working with node-fetch server side

I am trying to upgrade my node-fetch with the instructions here:
https://github.com/node-fetch/node-fetch/blob/HEAD/docs/v3-UPGRADE-GUIDE.md
I am able to get it to work and return a result when I don't set the signal option. I am not able to get the timeout working using timeoutSignal.
https://github.com/node-fetch/timeout-signal
const signal = timeoutSignal(5000); // This returns and empty AbortSignal object
// setting this causes an error, the fetch works without it
_.set(
opts,
'signal',
signal
);
const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
fetchedResponse = await fetch(url, opts)
.then(response => {
console.log(response);
return response;
})
.catch(error => {
console.log(error);
})
If I change the property name 'signal' to anything else like 'signal-disable' or just remove it, everything works (without a timeout). The issue is that 'timeoutSignal(5000)' is returning an empty 'AbortSignal' object.
In the examples that I see, timeoutSignal seems to be always used in a client side scenario. I am not sure if this will work server side and can't find any examples.

fetch: inspect return value along side with json parsing

This question is about how to handle promise. Example:
fetch(url)
.then(res => res.json() )
.then(data => console.log(data) )
.catch(err => console.log("ERROR:", err.message))
My purpose is to inspect the res before pass it to json(), like:
fetch(url)
.then(res => {
console.log(res) // this does not contain response body
console.log(res.text()) //<-- how to do this
res.json()
})
As far as I know, text() also returns a promise, like json(). In case I also want the raw text, how to handling multiple promise at the same time?
One option might be just use text() like this:
fetch(url)
.then(res => { res.text() })
.then(raw => {
let data = JSON.parse(raw) //this is no longer a promise...
console.log(data)
})
.catch(err => console.log("ERROR:", err.message))
Is this a valid option, or "idiomatic" way of handling such situation? However even this is possible, I am still interested if it is possible to execute multiple promises and handle them gracefully.

The problem is that both res.text() and res.json() read the body of the http request from the incoming stream and once they've read it, it's gone from the stream - it can't be read again. So, you can't call one, then the other. You can only use one of them on any given request.
If you wanted to look at the data before parsing it into JSON, you'd have to get the text, keep it and then manually call JSON.parse() on the text.
So, your scheme here:
fetch(url)
.then(res => res.text())
.then(raw => {
let data = JSON.parse(raw) //this is no longer a promise...
console.log(data)
return data;
});
Is the general way to do that, but you would just need to add the return data so that the resolved value of the promise becomes the parsed Javascript object so whatever is trying to consume this data can have access to it.
This is the way to do what you're asking - there is no other magic preferred way.

how to fix networkerror when fetching an api?

I'm trying to fetch an Api, but it keeps telling me there is a network error and I cant find a way anywhere to fix it.
const atlasApi = `Access-Control-Allow-Origin: https://atlas-obscura-api.herokuapp.com/api/atlas/destinations`
fetch(atlasApi).then(response => {
return response.json()
}).then(data => {
console.log(data)
})

Your api url seems incorrect, please try removing Access-Control-Allow-Origin: from the atlasApi. Then it should work fine.

How to use the fetch api method on Open Weather API

I'm trying to use the fetch method to display the current weather on a website. However, I keep getting an error stating that res is not defined. What do I need to do?
fetch('https://api.openweathermap.org/data').then(res => {
return res.json();
}).then(function(myJson) {
console.log(res.coord);
});
Note: The API call has been edited to ensure privacy

The problem is that you're using different parameter names in your functions. In your first function, you're using res:
.then(res => {
But in your second, you're using myJSON:
.then(function(myJson) {
Changing your code to this would fix your problem:
fetch('https://api.openweathermap.org/data').then(res => {
return res.json();
}).then(function(res) {
console.log(res.coord);
});

React Native Fetch won't execute

I've spent several hours trying to figure out how to query an API using fetch, but I can't even seem to get the fetch command to execute.
I'm very new to Javascript so hopefully someone can just point out some dumb mistake because I can't even get past the first step of using fetch.
Here is the very small snippet of code that I can't get to work.
var req = new Request('http://myapp.com:8000/api/posts', {method: 'GET'});
console.log("1");
fetch(req).then(function(res) {
console.log("2");
return res.json();
})
console.log("3");
The console logs "1", and "3", every time, but "2" is never even logged.
Does anyone know what is going on?
Also, I am making fetch requests to a locally running django server, and from monitoring the the server no requests are even being made to the server when I run my react-native app.

Try using fetch directly, see how it is done on the Networking page:
var url = 'http://myapp.com:8000/api/posts';
console.log("1");
fetch(url).then(function(res) {
console.log("2");
return res.json();
})
console.log("3");

Here is another way you can fetch data
fetch("http://date.jsontest.com/")
console.log("1");
.then((response) => response.json())
.then((responseData) => {
console.log("2");
this.setState({date: responseData.date});
})
.done();
}

Try adding a catch to check if there is any error.
fetch(url).then(function(res) {
console.log("2");
return res.json();
}).catch((error) => {
console.error(error);
});